Angular4：数据表需要时间来加载大数据答案

【问题标题】：Angular4: Datatable taking time to load large dataAngular4：数据表需要时间来加载大数据
【发布时间】：2018-04-10 13:06:08
【问题描述】：

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

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

  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 个阵列。

【问题讨论】：

你考虑过分页吗？ 5000 条记录对于任何浏览器来说都难以显示。
是的，我设置了 paging: true。我用 datatable-basic.js 代码更新了这个问题。请检查
哎哟......这不是你用角度做事的方式。对于初学者，不要加载这样的脚本。其次，你真的需要一个插件来显示一个表格吗？
@Davy 我需要为表格添加额外的功能，例如搜索、排序。所以我用插件代替普通表
Angular 将绑定这 5000 行，然后您将加载该脚本，然后该脚本将修改 angular 的渲染输出。除了所有会破坏的东西之外，分页不会解决您的性能问题。如果您需要一个插件来执行此操作，请找到一个为在 Angular 中使用而编写的插件。这确实是错误的做法。

标签： angular datatable rendering

【解决方案1】：

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

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

【讨论】：

是的，我做了这样的服务器端分页$companies = Company::paginate(50);，现在我只能看到 50 条记录。当我在前端的表格上单击下一步时，它在 50 条记录后不显示任何数据
这是分页点，您需要为用户提供控件以请求从数据库中获取下一个/上一个/第一个/最后 50 条记录。
是的，但是如何控制数据表中的上一个和下一个按钮？