数据表延迟加载数据。如何动态传递“deferLoading”值

Posted 2023-05-09

技术标签:

【中文标题】数据表延迟加载数据。如何动态传递“deferLoading”值【英文标题】：Data Table Deferred loading of data. How to pass the "deferLoading" value dynamically 【发布时间】：2021-10-08 08:16:23 【问题描述】：

使用数据表进行服务器端分页。此处表格的第一页已在 html 中预加载。这可以通过延迟加载数据来实现。以下链接已用于获取详细信息。

this site

这里的 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']
]

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

【问题讨论】：

【参考方案1】：

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

所以，假设我们已经构建了 HTML 表格并在其中填充了一些数据：

    <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>$320,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"

这将返回一个简单的 JSON 结构，其中包含我们要在 deferLoading 选项中使用的计数 - 所以，在我的例子中是这样的：


  "count": 57

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

"deferLoading": deferDataCount,

现在，下次执行用户操作（分页/过滤/排序）时，DataTable 将使用其 URL 来获取下一页数据：

url: "YOUR_URL_HERE/serverside-data"

此 URL 将返回 DataTables 所需的所有 serverSide 值，包括行数据 JSON（在我的情况下）如下所示：


  "id": "2",
  "name": "Garrett Winters",
  "position": "Accountant",
  "salary": "$170,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>$320,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>

【讨论】：

这里没有初始化数据表，这样实现后没有分页栏。另外，是否需要初始化 $(document).ready 中的数据表？我将完整的网页内容添加到我的答案中，看看这是否有助于澄清我的方法（是的，您总是需要将 DataTable 初始化放在“文档准备好”函数中）。如果这没有帮助，您可以更新您的问题以显示您更新的方法以及您遇到的任何浏览器控制台错误。谢谢，这正在工作，有另一个问题，问题已更新。很高兴它正在工作。你能为这个新问题创建一个新问题吗？

以上是关于数据表延迟加载数据。如何动态传递“deferLoading”值的主要内容，如果未能解决你的问题，请参考以下文章

Primefaces 动态列不适用于延迟加载

Swift 3：如何动态加载图像并将变量传递给第二个视图控制器？

echarts如何重新加载数据

将数据从 ASP.NET 页面传递到动态加载的 ASCX 用户控件

如何使用子视图的延迟/动态加载实现自定义 UIView，类似于 UITableView

如何在网站完成加载动态内容之前延迟fetch（）

数据表 延迟加载数据。如何动态传递“deferLoading”值

数据表延迟加载数据。如何动态传递“deferLoading”值