For those who are having trouble with slow display speeds in DataTables

Hello, this is Hase from the Web Systems Department.
Are you familiar with DataTables?

Web programmers will probably be familiar with it, but to put it simply, it is a convenient jQuery plugin that allows you to easily implement paging, sorting, and search functions in HTML tables

I often use this in Beyond projects

It's convenient because you don't have to implement paging, sorting, and search functions on the PHP side, and it's very easy to use, so I find it very useful, but there is one drawback

Display speed is slow

Well, it goes without saying, but the more data you have, the slower it will be to display

How slow it is depends on your PC specs, but it's so slow that it takes almost 30 seconds to display 10,000 pieces of data...

It doesn't take much time to retrieve the data itself, but the main cause seems to be that it takes time to process the table in jQuery after retrieving the data

How to make it display faster

However, there is a way to speed up this table drawing process, and we will introduce that method here

Passing data directly to jQuery in JSON format

The display processing speed will be faster if you output only the table on the view side, convert the data to JSON format, and pass it directly to DataTables for drawing, rather than outputting all the data in table, tr, and td on the view side and then using DataTables for drawing

Now, let's take a look at the code.
We're using FuelPHP in this example, but the same approach can be used with other frameworks.

Before change

■ Controller

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

■ View

<div class="user-list"><table class="datatable table table-bordered table-sorted text-center"><thead><tr><th> Id</th><th> name</th><th> age</th><th> height</th><th> body weight </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 (DataTables)

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

After the change

■ Controller

$_users = Model_User::find('all'); // Put the retrieved data back into an array $users = []; foreach ($_users as $u) { // Store in an array *If you make it an associative array it won't work properly, so make it an array $users[] = [ $u['id'], $u['name'], $u['age'], $u['height'], $u['weight'], ]; } // Set it in the view in JSON format $this->template->content = View::forge('users', json_encode($users));

■ View

<!-- 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>

■ Jquery (DataTables)

jQuery(function($){ // Get data from the data attribute var users = $('.user-list').data('users'); $.extend( $.fn.dataTable.defaults, { // Japanese localization language: { url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" } }); $("datatable.table").DataTable({ // Define data with the data option data: users, // Define the part that corresponds to th in the view with the column option columns: [ { title: "ID" }, { title: "Name" }, { title: "Age" }, { title: "Height" }, { title: "Weight" } ], order: [ [ 0, "desc" ] ] }); });

That's it

result

Actual measurements showed that the processing speed was reduced to 1/5 of its original speed.
Checking with Chrome's DevTools also clearly demonstrated the significant reduction in display speed.

Of course, there will be differences depending on the number of columns and data, but I was able to see that it was noticeably faster, so I think the effect is tremendous

If you are using DataTables and are experiencing slow display speeds,
please refer to this article.

lastly

I have launched "SEKARAKU Lab," a service site for the system development company I belong to.
Beyond offers a one-stop service for everything from server design and construction to operation, so please feel free to contact us if you have any problems with server-side development.
SEKARAKU Lab:[https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

That's all