Question

我有几行包含一些延迟加载的数据。例如，

＆＃13;

    <table border="1">
      <tr>
          <th>Employee</th><th>Sales</th>
      </tr>
      <tr>
          <td>Michale</td><td>1000</td>
      </tr>
      <tr>
          <td>Kim</td><td id="kimSales"></td>
      </tr>
      <tr>
          <td>John</td><td id="johnSales"></td>
      </tr>
    </table>

＆＃13;

问题是，由于某些原因，我必须在页面加载后检索一些数据。假设kimSales为1500，johnSales为2500。

<script>
    $(document).on('ready', function(e){
         $('#kimSales').text(1500);
         $('#johnSales').text(2500);
    })     
</script>

在这种情况下，我想要使用延迟加载的数据进行正确排序。您知道，jQuery dataTable通过列的单击标题具有排序功能，例如https://datatables.net我无法正确排序这些数据。排序的数据不是升序的，或者dsc ---也许dataTable在加载数据后无法识别。

我尝试了什么：

<script>
    $(document).on('ready', function(e){
         $('#kimSales').text(1500);
         $('#johnSales').text(2500);
    })

    table.dataTable(); // not properly working
</script>

Answer 1

如果更新单元格数据 BEFORE 初始化表格，它应该可以正常工作。

此外，您应该在ready事件处理程序中初始化表。例如：

$(document).on('ready', function(e){
     $('#kimSales').text(1500);
     $('#johnSales').text(2500);

     var table = $('#example').DataTable();
});

如果更新单元格的数据 AFTER 初始化表格，则需要使用cell().invalidate() API方法并重新绘制表格。

例如：

$(document).on('ready', function(e){
     var table = $('#example').DataTable();

     $('#kimSales').text(1500);
     table.cell($('#kimSales').closest('td')).invalidate();

     $('#johnSales').text(2500);
     table.cell($('#johnSales').closest('td')).invalidate();

     table.draw();
});

Answer 2

我希望您希望基于第二列实现排序。在表初始化代码和您首选的排序技术[asc，desc]

中尝试这一点

http.get(...)

带有ajax加载数据的jQuery dataTable排序

2 个答案: