数据 Table 延迟加载数据。如何动态传递 "deferLoading" 值

Question

使用数据 Table 进行服务器端分页。这里 table 的第一页已经预加载到 HTML。这可以使用延迟加载数据来实现。下面link已被用来获取详情

这里的 deferLoading 值是硬编码的，所以如何动态传递这个“deferLoading”值。

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/server_processing.php",
        "deferLoading": 57
    } );
} );

以下代码无效。有没有办法可以稍后更改 deferLoading 值？

function loadInitialData(){
//ajax call to load initial html data
    var totalRecords = //get Value from server;
    table.deferLoading = totalRecords;
    table.fnDraw();
}

Ajax 调用返回以下数据

[               [0,'2021072701587','08:04:57'],
               [1,'2021072701585','08:03:46'],
               [2,'2021072701585','08:02:44']
]

但是从第二次开始，通过使用我得到了这样的页数错误。

Answer 1

您可以通过初始（单独）Ajax 调用提供 deferLoading 值 - 例如，使用 jQuery ajax。然后，您可以在完成初始 Ajax 调用后将该值传递给您的 DataTable。

所以，假设我们已经构建了 HTML table 并用一些数据填充了它：

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
                <th>Start date</th>
                <th>Office</th>
                <th>Extn.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>0,800</td>
                <td>2011/04/25</td>
                <td>Edinburgh</td>
                <td>5421</td>
            </tr>
            <tr> ... and more initial rows... </tr>
        </tbody>
    </table>

那么我们可以使用如下脚本：

$(document).ready(function() {

  $.ajax({
    url: "YOUR_URL_HERE/preload-count"
  })
  .done(function( data ) {
    initializeTable( data.count );
  });

  function initializeTable(deferDataCount) {
    $('#example').DataTable( {
      serverSide: true,
      "deferLoading": deferDataCount,
      ajax: {
        url: "YOUR_URL_HERE/serverside-data",
      },
      "columns": [
        { "title": "ID", "data": "id" },
        { "title": "Name", "data": "name" },
        { "title": "Position", "data": "position" },
        { "title": "Salary", "data": "salary" },
        { "title": "Start Date", "data": "start_date" },
        { "title": "Office", "data": "office" },
        { "title": "Extn.", "data": "extn" }
      ]
    });
  }

} );

在上面的脚本中，我们先调用下面的URL：

url: "YOUR_URL_HERE/preload-count"

这个 return 是一个简单的 JSON 结构，其中包含我们要在 deferLoading 选项中使用的计数 - 因此，在我的例子中是这样的：

{
  "count": 57
}

然后将此整数传递给我的 initializeTable(deferDataCount) 函数，其中使用我需要使用的计数初始化 DataTable：

"deferLoading": deferDataCount,

现在，下一次执行用户操作时 (paging/filtering/sorting) DataTable 将使用其 URL 获取下一页数据：

url: "YOUR_URL_HERE/serverside-data"

并且此 URL 将 return DataTables 所需的所有必需 serverSide 值，包括行数据 JSON，（在我的例子中）如下所示：

{
  "id": "2",
  "name": "Garrett Winters",
  "position": "Accountant",
  "salary": "0,750",
  "start_date": "2011/07/25",
  "office": "Tokyo",
  "extn": "8422"
}

更新

这是我的完整网页，供参考，展示所有部分如何组合在一起：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
                <th>Start date</th>
                <th>Office</th>
                <th>Extn.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>0,800</td>
                <td>2011/04/25</td>
                <td>Edinburgh</td>
                <td>5421</td>
            </tr>
        </tbody>
    </table>

</div>

<script type="text/javascript">

$(document).ready(function() {


  $.ajax({
    url: "YOUR_URL_HERE/preload-count"
  })
  .done(function( data ) {
    initializeTable( data.count );
  });

  function initializeTable(deferDataCount) {
    $('#example').DataTable( {
      serverSide: true,
      "deferLoading": deferDataCount,
      ajax: {
        url: "YOUR_URL_HERE/serverside-data",
      },
      "columns": [
        { "title": "ID", "data": "id" },
        { "title": "Name", "data": "name" },
        { "title": "Position", "data": "position" },
        { "title": "Salary", "data": "salary" },
        { "title": "Start Date", "data": "start_date" },
        { "title": "Office", "data": "office" },
        { "title": "Extn.", "data": "extn" }
      ]
    });
  }

} );

</script>

</body>
</html>

数据 Table 延迟加载数据。如何动态传递 "deferLoading" 值

Data Table Deferred loading of data. How to pass the "deferLoading" value dynamically

datatable

jquery

datatables