搜索和排序在单个页面中的多个数据表中不起作用

Question

我在单页中有 5 个使用 DataTables 的表。 第一个表可以正常搜索和排序项目，但其他表不能正常工作。 这是我的代码：

<script>
$(document).ready(function () {
    $('#itemList').DataTable();
    $('#itemListPending').DataTable();
    $('#itemListAccepted').DataTable();
    $('#itemListShipped').DataTable();
    $('#itemListDelivered').DataTable();

    //Partial Items
    $("#tbl_pending").load('@Url.Action("GetPendingOrders", "Admin")', function () { });
    $("#tbl_accepted").load('@Url.Action("GetAcceptedOrders", "Admin")', function () { });
    $("#tbl_shipped").load('@Url.Action("GetShippedOrders", "Admin")', function () { });
    $("#tbl_delivered").load('@Url.Action("GetDeliveredOrders", "Admin")', function () { });

});
</script>

我已经在互联网上搜索但没有任何反应。 谢谢！

Answer 1

试试这个方法：

let dt_columns = ["columns for table1", "columns for table2", "etc"];
let tables = [];
$('.table').each(function(i, el) {
    var dataSource = $(this).attr("data-ajaxsource");
    var columns = dt_columns[i];
     tables[i] = $(this).DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": {
          "url": dataSource,
          "type": "POST",
          "data":{}
      },
      "columns": columns
    });
});

/* reload datatable if you want */
$("AnyEventHappenOnYourTables").change(function(){
  tables.forEach(function(el, i){
    el.ajax.reload();
  });
});

这意味着您必须通过 ajax 通过@Url.Action("GetPendingOrders", "Admin")列表填写表格，这样您的JQuery.DataTable()将等到加载操作。