DataTables Not Showing Processing Indicator During Server-Side Requests

April 9th, 2015 - Posted by Steve Marks to Javascript / jQuery, Web Development.

We use the DataTables jQuery plugin for the majority of applications where we need to display grids. It looks great, has a large number of customisable options available and is easy to work with.

When dealing with large amounts of data it’s definitely advantageous to use the in-built AJAX functionality available with DataTables. This essentially means that instead of getting every single record when the page is loaded, only the required records for the current page are obtained. If someone navigates to another page, or sorts the grid, subsequent AJAX requests are then made to only get the data required.

The Problem

During the build of an application recently we used these kinds of server-side requests to speed up grids that would be containing thousands and thousands of records. What we noticed however was that during these server-side requests there was no loading indicator showing. This meant that the user had no idea the next set of records were being loaded should the AJAX requests take more than a second or so.

The Solution

After delving into the DataTables JavaScript file I soon worked out that the reason the loading indicator wasn’t showing was two fold:

1. The ‘processing‘ option needs to be set to true
2. In the ‘sDom‘ option the letter ‘r‘ was needed.

After making the amends, the final code looked something like so:

var options = {
    "sDom": 'prtp',
    "processing": true,
    "serverSide": true,
    "ajax": "/path/to/my/ajax.php"
var oTable = $('.datatables').dataTable(options);
This entry was posted on Thursday, April 9th, 2015 at 10:59 am by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first