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属性根据从＆＃34; get＆＃34;返回的名称设置列。 ajax电话。

Jquery数据表数据通过Ajax将数据附加到表

1 个答案: