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

Question

我有 5 table 在单页中使用数据表。第一个 table 可以正常搜索和排序项目，但其他 table 无法使用它。这是我的代码：

<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() 将等待操作加载。

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

Search and sorting are not working in multiple DataTables in single page

javascript

datatable