Question

我有一个数据表需要花费大量时间来显示数据

我在组件中调用了这样的脚本：

  ngAfterViewInit() {
    $.getScript('./assets/js/datatables/datatable-basic.js');
  }

以html格式渲染数据

<table class="table zero-configuration">
    <thead>
        <tr>
          <th>Name</th>
          <th>ID</th>
          <th></th>
        </tr>
     </thead>
     <tbody>
        <tr *ngFor="let companyData of company?.companies; trackBy: userThumb">
            <td class="text-truncate">{{ companyData?.name }}</td>
            <td class="text-truncate">{{companyData?.id}}</td>
            <td class="text-truncate"></td>
        </tr>
     </tbody>
    </table>

这是我的datatable-basic.js

setTimeout(function () {
    $('.zero-configuration').DataTable({
      "iDisplayLength": 50,
      "paging": true
    });
}, 3000);

这些公司将拥有近5000个阵列。

Answer 1

您似乎在客户端“设置了分页” - 您仍在通过网络加载5K记录，但一次只显示50条记录。要真正影响性能，您可能必须进行服务器端分页，这样您一次只能加载50条记录。

编辑：以下是一个示例：How to use server side option in Angular DataTables with the Angular way example?

Angular4：Datatable需要时间来加载大数据

1 个答案: