搜索和排序在單個頁面中的多個數據表中不起作用

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()將等到加載操作。