JQuery数据通过Ajax向表追加数据

Question

我使用一个自定义搜索函数的ajax查询，返回超文本标记语言数据成功调用。我想把这个数据附加到已经在页面上初始化的jQuery数据表中。当页面加载jQuery可数据显示，但是当我启动搜索功能，数据被附加到可数据，但不是排序，可搜索形式的可数据用户界面。ajax调用工作和数据返回时，我把成功的调用到console.log.

以下是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调用返回的格式化超文本标记语言数据的结构。

<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调用返回的名称设置列。