数据表延迟加载不起作用

Posted 2023-05-07

【中文标题】数据表延迟加载不起作用

【英文标题】：Datatable Lazy loading not working

【发布时间】：2019-01-15 07:37:42

【问题描述】：

我一直在尝试使用数据表的延迟加载功能，但是它一次加载所有数据，我无法弄清楚，出了什么问题。

var dataTable = dataTable || ;

dataTable = (function(namespace) 
  var api = "https://jsonplaceholder.typicode.com/photos";

  namespace.drawDataTable = function() 
    try 
      $('#table').DataTable(
        "processing": true,
        "serverSide": true,
        "ajax": 
          "url": api,
          "dataSrc": ""
        ,
        "columns": [
            "mData": "thumbnailUrl"
          ,
          
            "mData": "albumId"
          ,
          
            "mData": "id"
          ,
          
            "mData": "title"
          ,
          //  "mData": "url" 
        ],
        "scrollY": 200,
        "scroller": 
          loadingIndicator: true
        
      );
     catch (e) 
      console.error(e.message);
    
  

  return namespace;
(dataTable = dataTable || ));

$(document).ready(function() 
  dataTable.drawDataTable()
)

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="table">
  <thead>
    <tr>
      <th>thumbnailUrl</th>
      <th>albumId</th>
      <th>id</th>
      <th>title</th>
      <!-- <th>url</th> -->
    </tr>
  </thead>
</table>

我已经尝试过这些问题。

Lazy loading of table rows in Jquery datatables 1.10.10? DataTables: Cannot read property 'length' of undefined

【参考方案1】：

要以块的形式加载数据，您需要编写服务器端脚本，最好使用 DataTables 发行版中提供的帮助程序类 SSP (ssp.class.php)。这样，数据将分块返回并由前端 DataTables 插件使用。

您的链接https://jsonplaceholder.typicode.com/photos 一次返回所有记录，DataTables 前端插件无法提取其中的一部分，仍然需要下载整个 JSON 文件。

请参阅Server-side processing，详细了解需要返回哪些数据才能使延迟加载正常工作。