对于那些在数据表中遇到显示速度慢问题的人
大家好,我是网络系统部的 Hase。
大家知道DataTable是什么吗?
如果您是一名 Web 程序员,您可能对此了解相当多,但向您简要说明一下,它是一个有用的 jQuery 插件,可以让您轻松实现 HTML 表格的分页、排序和搜索功能。
我经常在 Beyond 的项目中使用它。
它很容易,因为你不必在PHP端实现分页、排序和搜索功能,而且它非常容易使用,所以它非常有用,但有一个缺点。
显示速度慢
不用说,数据越多,显示速度就越慢。
有多慢取决于你的电脑规格,但它足够慢,显示 10,000 条数据需要近 30 秒......
检索数据本身并不需要太多时间,但主要原因似乎是检索数据后用 jQuery 处理表格绘制需要时间。
如何加快显示速度
不过,有一种方法可以加快这个表格绘制过程,所以这次我将介绍该方法。
以 JSON 格式直接将数据传递给 jQuery
而不是在视图端将所有数据输出为table、tr、td然后用DataTables处理绘图,而是在视图端只输出表格,将数据以JSON格式直接传递给DataTables,并进行绘图的显示处理。如果这样做,速度会更快。
现在让我们看一下代码。
这次我使用的是 FuelPHP,但其他框架也可以以类似的方式使用。
变更前
■ 控制器
1 | $users = Model_User::find( 'all' ); $this ->template->content = View::forge( 'users' , $users ); |
■ 查看
1 | <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(数据表)
1 | jQuery( function ($){ $.extend( $.fn.dataTable.defaults, { // 日语: { url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japan .json " } }); $("datatable.table").DataTable({ order: [ [ 0, "desc" ] ] }); }); |
改变后
■ 控制器
1 | $_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)); |
■ 查看
1 | <!-- 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(数据表)
1 | 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/)
就是这样。