Using pipeline in DataTables

jQuery DataTables is simple to use as a jQuery plug-in with a huge range of customizable options.

As discussed in a previous blog, we already know how to draw a basic paginated html table using DataTables.

Another way is to make an ajax call for every page. This causes multiple requests to be made on your server for every dataset.

Using DataTable pipeline, we can reduce these requests by fetching more data than is needed for each dataset.
For example, If we have 1000 records and we are displaying 10 records on a single page,  we can configure pipeline to fetch 50 records (data for 5 pages) in a single request. If user navigates to page 6, only then a new request is made to fetch data for next 5 pages (6-10 pages).

Clearly, using pipelines, we can reduce the number of requests on our server.

Let’s see how it works :

Step 1 : Include jquery.min.js, jquery.datatables.min.js and jquery.datatables.min.css on your page.

Step2 : Create an empty table structure (with empty table body) :

[java]
<table id="employeeListing">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Email</td>
<td>Age</td>
<td>City</td>
<td>Salary</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
[/java]

Step 3 : Include this js file on your page (This is taken from one of the examples of datatable). Here, in ‘enableAjaxifiedDataTable’ function, we are extending datatable to support data pipelining.

Step 4 : Create a new function which intializes datatables for your table :

[java]
function drawTable(table, noOfPagesToCache, totalRecords, ajaxUrl) {
$(table).dataTable({
‘aoColumnDefs’: [
{
‘bSortable’: false,
‘aTargets’: [‘nosort’]
}
],
"lengthMenu": [
[10, 25, 50, 100, totalRecords],
[10, 25, 50, 100, "All"]
],
"serverSide": true,
"bProcessing": true, // Display processing text, while an ajax call is being made
"ajax": $.fn.dataTable.pipeline({
url: ajaxUrl, //specify ajax url
pages: noOfPagesToCache // no of pages you wish to cache
})
});
}
[/java]

Step 5 : Invoke the above functions in document.ready :

[java]
$(document).ready(function () {
var totalRecords = 2000; // total no of records
var ajaxUrl = "localhost:8080/someUrl" // url that fetches the data for the table
enableAjaxifiedDataTable();
drawTable($(‘#employeeListing’), 1, totalRecords, ajaxUrl); //Initializes the datatable
});
[/java]

When an ajax call is made by datatables it sends various parameters, following are some commonly used parameters :
– start // start index
– length // total no of records to fetch (in one draw)
– order[indexOfColumn][dir]=sortOrder // here indexofColumn means the column-index* which you want to sort, sortOrder would be “asc” or “desc”
– search[value]=searchText // here, searchText is the text you entered in the search text-box

Note :
column-index : The table columns are zero-indexed, where the first column has 0 index, second has 1st index, and so on…
In this case : 0 – “FirstName”, 1- “LastEmail”, 2 – “Email”, 3 – “Age”, 4 – “City”, and 5 – “Salary”.

Step 6 : Implement your back-end logic accordingly.

Once you get everything to work, this should help you reduce a considerable number of requests on your server.

For better understanding, I have created a demo application.

Hope it helps 🙂

Please share your queries in the comment section below so that I will get back to you as soon as possible. To know more about what we offer in Grails service, get in touch with us.