Question

我一直在尝试使用datatable的延迟加载功能，但是它一次加载了所有数据，我无法弄清楚是怎么回事。

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>

我已经尝试过这些问题。

Answer 1

要大块加载数据，您需要编写服务器端脚本，最好使用DataTables发行版中可用的辅助类SSP（ssp.class.php）。这样，数据将以块的形式返回并由前端DataTables插件使用。

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

有关Server-side processing的更多详细信息，以使延迟加载工作需要返回哪些数据。

数据表延迟加载不起作用

1 个答案: