对于那些在数据表中遇到显示速度慢问题的人

大家好，我是网络系统部的 Hase。
大家知道DataTable是什么吗？

如果您是一名 Web 程序员，您可能对此了解相当多，但向您简要说明一下，它是一个有用的 jQuery 插件，可以让您轻松实现 HTML 表格的分页、排序和搜索功能。

我经常在 Beyond 的项目中使用它。

它很容易，因为你不必在PHP端实现分页、排序和搜索功能，而且它非常容易使用，所以它非常有用，但有一个缺点。

显示速度慢

不用说，数据越多，显示速度就越慢。

有多慢取决于你的电脑规格，但它足够慢，显示 10,000 条数据需要近 30 秒......

检索数据本身并不需要太多时间，但主要原因似乎是检索数据后用 jQuery 处理表格绘制需要时间。

如何加快显示速度

不过，有一种方法可以加快这个表格绘制过程，所以这次我将介绍该方法。

以 JSON 格式直接将数据传递给 jQuery

而不是在视图端将所有数据输出为table、tr、td然后用DataTables处理绘图，而是在视图端只输出表格，将数据以JSON格式直接传递给DataTables，并进行绘图的显示处理。如果这样做，速度会更快。

现在让我们看一下代码。
这次我使用的是 FuelPHP，但其他框架也可以以类似的方式使用。

变更前

■ 控制器

$users = Model_User::find('all'); $this->template->content = View::forge('users', $users);

■ 查看

<div class="user-list"><table class="datatable table table-bordered table-sorted text-center"><thead><tr><th> ID</th><th>姓名</th><th>年龄</th><th>高度</th><th>体重</th></tr></thead><tbody><?php foreach($users as $u) : ?><tr><td><?php echo $u['id'] ?></td><td><?php echo $u['name'] ?></td><td><?php echo $u['age'] ?></td><td><?php echo $u['height'] ?></td><td><?php echo $u['weight'] ?></td></tr><?php endforeach ?></tbody></table></div>

■ jQuery（数据表）

jQuery(function($){ $.extend( $.fn.dataTable.defaults, { // 日语: { url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japan .json " } }); $("datatable.table").DataTable({ order: [ [ 0, "desc" ] ] }); });

改变后

■ 控制器

$_users = Model_User::find('all'); // 将获取到的数据放回到数组中 $users = []; foreach ($_users as $u) { // 存储在数组中 *如果将其设为关联数组，它将无法正常工作所以将其设为数组 $users[] = [ $u['id'], $u['name'], $u['age'], $u['height' ], $u['weight'], ]; // 以 JSON 格式在视图中设置 $this->template->content = View::forge('users', json_encode($users));

■ 查看

<!-- data属性を使用してJS側にデータを渡す --> <div class="user-list" data-users="<?php echo $users ?>"> <table class="datatable table table-bordered table-sorted text-center"></table> <!-- tr, td は記述しない --> </div>

■ Jquey（数据表）

jQuery(function($){ // 从 data 属性获取数据 var users = $('.user-list').data('users'); $.extend( $.fn.dataTable.defaults, { // 日语language: { url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japan.json" } }); $("datatable.table").DataTable({ // data 可选定义数据data: users, // column 可选择定义视图列的一部分: [ { title: "ID" }, { title: "Name" }, { title: "Age" }, { title: "Height" }, { title : "权重" } ], 顺序: [ [ 0, "desc" ] ] });

现在已经完成了。

结果

当我们实际测量时，处理速度降低到了1/5。
如果你用Chrome的DevTools检查，你可以清楚地看到显示速度被缩短了。

当然，根据列数和数据的数量会有变化，但我可以确认速度明显更快，所以我认为效果是巨大的。

如果您正在使用DataTables并且遇到显示速度慢的问题，
请参考这篇文章。

最后

我开设了我所属的系统开发服务网站“SEKARAKU Lab”。
Beyond是从服务器设计搭建到运营的一站式服务，所以如果您在服务器端开发方面遇到任何问题，请随时联系我们。
SEKARAKU 实验室： [https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

就是这样。