javascript - Jquery Datatables数据通过Ajax将数据追加到表中

Question

我正在对 ajax 查询使用自定义搜索函数，该函数在成功调用时返回 HTML 数据。我想将此数据附加到已在页面上初始化的 jquery 数据表中。当页面加载时，会显示 jquery 数据表，但是当我启动搜索功能时，数据会附加到数据表中，但不可排序，也不能从数据表 UI 中搜索。当我将成功的调用放入 console.log 中时，ajax 调用确实有效并且返回数据。

这是 HTML:

<table id="partTable">
<thead>
    <tr>
        <td><h4>Part Number</h4></td>
        <td><h4>Vendor Name</h4></td>
        <td><h4>Description</h4></td>
        <td><h4>Quantity</h4></td>
        <td><h4>Reorder Point</h4></td>
        <td><h4>Cost</h4></td>
        <td><h4>12 Month Sales</h4></td>
    </tr>
</thead>
<tbody>
</tbody>
</table>

这是带有 Ajax 调用的 Jquery:

$(document).ready(function(){   
    $('#partTable').DataTable();
    $("#target").click(function() {
    $("#target").prop("disabled",true);
    $("#spinner").show();
    var locations = $("#locations").val();
    var percentages = $("#percentages").val();
    $.ajax({
      type: "GET",
      url: "/XXXXX/xxxxxxWS.php",
      data:{
        locations : locations,
        percentages : percentages
      },
      success: function(data){
        $("#target").prop("disabled",false);
        $("#spinner").hide();
           $("#partTable tbody").empty().append(data);
      }
    });
});

});

这是从 ajax 调用返回的格式化 HTML 数据的结构。

<tr>
     <td>0</td>
     <td>0</td>
     <td>0</td>                
     <td>0</td>
     <td>0</td>
     <td>0</td>
     <td>0</td>
 </tr>

 <tr>
     <td>1</td>
     <td>1</td>
     <td>1</td>                
     <td>1</td>
     <td>1</td>
     <td>1</td>
     <td>1</td>
 </tr>

Answer 1

如果您尝试在页面加载时将数据添加到表中，为什么不在表启动时添加数据

$('#partTable').DataTable({
    "processing": true,
    "searching": false,
    "responsive": true,
    "ajax": { "url": "/XXXXX/xxxxxxWS.php", "type": "GET", "data": function (c) { c.locations = locations; c.percentages = percentages; } },
    "columns": [{"data": "ColumnNameFromPHP"}, {"data": "ColumnNameFromPHP"}, {"data": "ColumnNameFromPHP"}, {"data": "ColumnNameFromPHP"}]
});

请注意 columns 属性根据“get”ajax 调用返回的名称设置列。