数据表延迟加载不起作用答案

【问题标题】：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>

我已经尝试过这些问题。

【问题讨论】：

标签： javascript html css datatables

【解决方案1】：

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

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

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

【讨论】：