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

Hello, I'm Hase from the Web Systems Department.
Do you know what DataTables is?

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 actual code.
This time we're using FuelPHP, but the same method 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

When we actually measured it, the processing speed was reduced to 1/5.
Checking it in Chrome DevTools also shows that the display speed has been significantly reduced.

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 having trouble with slow display speeds,
please refer to this article.

lastly

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

That's all