DataTable：如何使页面加载更快？

Posted 2023-02-24

【中文标题】DataTable：如何使页面加载更快？

【英文标题】：DataTable : How to make a page load faster?

【发布时间】：2015-05-05 12:36:51

【问题描述】：

我的数据库中有大约 20,000 行，我使用 DataTable 加载所有这些数据。

DataTable 开始加载我的所有数据。 DataTable 适用于 100 或以下的少量数据，但在我的情况下，我的页面大约需要

3

分钟来加载页面。很坏 ！

使用 DataTable 提高加载速度的最有效方法是什么？

---

更新：

这是我的桌子

<table id="inventory_exact"> ...

这是我的设置

  // Setting to Inventory Table 
  $('#inventory_exact').dataTable(

    "lengthMenu": [ 10 ] ,
    "bLengthChange": false,
    "searchHighlight": true,
    "bInfo" : false

  );

---

更新 2： - 服务器端

@niyou：我使用 php Laravel，所以我查询我的数据并通过这样做显示它们

            @foreach ( Inventory::all() as $inventory)
             <tr>
                <td> $inventory->sku  </td>
                <td> $inventory->description  </td>
                <td>$ $inventory->price  </td>
                <td> $inventory->stock  </td>
             </tr>
            @endforeach

【问题讨论】：

好的...显示您的代码以查看您尝试过的内容...可能使用deferRender: true,定义会帮助您=)。

@bcesars ：我已经编辑了我的帖子。

很好... 首先：我鼓励你使用A new DataTables API。它的“它提供了更大的灵活性和改进的功能。”并且更易于实施。只需将 $('#inventory_exact').dataTable() 更改为 $('#inventory_exact').DataTable() 并删除所有双引号。 第二：你使用的是Ajax请求吗？因为如果你想让你的 DataTable 加载更快，你会需要它......

@niyou ：我已经为你的问题更新了我的帖子。

url 内的参数ajax 选项需要定义文件的位置，该文​​件具有来自数据库的查询。参数type可以为POST或GET请求，没有区别。我建议您阅读有关Ajax Objects 的信息。有一个简单的示例说明如何将请求 Ajax 与您的服务端脚本一起使用。

【参考方案1】：

当您处理客户端大型数据集（我定义为超过 1000 个）时，您可能希望切换到数据表数据的服务器端数据实现

使用最新的 1.10 语法，它看起来像这样

table = $('#example').DataTable( 
    serverSide: true,
    ajax: 
      url:"index.cfm/observers/json",
      ,
  );

其中 url 返回一个包含 draw、totalrecordcount、totalfilteredcount 和 data 的 json 对象

我已包含指向文档的链接

Datatables Server-Side Documentation

PHP example script to generate JSON needed for datatables on Github using SSP.class

PHP script to generate JSON for datatables written spagetti style (if you cant use SSP or need to use older datatables)