Jquery 数据表数据将数据附加到 Table 到 Ajax

Question

我正在对 ajax 查询使用自定义搜索功能，returns HTML 成功调用的数据。我想将此数据附加到已在页面上初始化的 jquery 数据 table。当页面加载 jquery 时显示数据 table，但是当我启动搜索功能时，数据被附加到数据 table 中，但不是 sortable，可从数据中搜索table UI。 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>

这是 Jquery 和 Ajax 调用：

$(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

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

$('#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"}]
});

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

Jquery 数据表数据将数据附加到 Table 到 Ajax

Jquery Datatables Data Appending Data to Table through Ajax

html

javascript

ajax

datatable

jquery