jQuery DataTables is simple to use as a jQuery plug-in with a huge range of customizable options.<\/p>\n
As discussed in a previous blog<\/a>, we already know how to draw a basic paginated html table using DataTables.<\/p>\n Another way is to make an ajax call for every page. This causes multiple requests to be made on your server for every dataset.<\/p>\n Using DataTable pipeline, we can reduce these requests by fetching more data than is needed for each dataset. Clearly, using pipelines, we can reduce the number of requests on our server.<\/p>\n Let’s see how it works :<\/p>\n Step 1 : Include jquery.min.js<\/a>, jquery.datatables.min.js<\/a> and jquery.datatables.min.css<\/a> on your page.<\/p>\n Step2 : Create an empty table structure (with empty table body) :<\/p>\n [java] Step 3 : Include this<\/a> 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.<\/p>\n Step 4 : Create a new function which intializes datatables for your table :<\/p>\n [java] Step 5 : Invoke the above functions in document.ready :<\/p>\n [java] When an ajax call is made by datatables it sends various parameters, following are some commonly used parameters : Note<\/strong> : Step 6 : Implement your back-end logic accordingly.<\/p>\n Once you get everything to work, this should help you reduce a considerable number of requests on your server.<\/p>\n For better understanding, I have created a demo application<\/a>.<\/p>\n Hope it helps \ud83d\ude42<\/p>\n
\nFor example, If we have 1000 records and we are displaying 10 records on a single page, \u00a0we 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).<\/p>\n
\n<table id="employeeListing">
\n <thead>
\n <tr>
\n <td>First Name<\/td>
\n <td>Last Name<\/td>
\n <td>Email<\/td>
\n <td>Age<\/td>
\n <td>City<\/td>
\n <td>Salary<\/td>
\n <\/tr>
\n <\/thead>
\n <tbody>
\n <\/tbody>
\n<\/table>
\n[\/java]<\/p>\n
\nfunction drawTable(table, noOfPagesToCache, totalRecords, ajaxUrl) {
\n $(table).dataTable({
\n ‘aoColumnDefs’: [
\n {
\n ‘bSortable’: false,
\n ‘aTargets’: [‘nosort’]
\n }
\n ],
\n "lengthMenu": [
\n [10, 25, 50, 100, totalRecords],
\n [10, 25, 50, 100, "All"]
\n ],
\n "serverSide": true,
\n "bProcessing": true, \/\/ Display processing text, while an ajax call is being made
\n "ajax": $.fn.dataTable.pipeline({
\n url: ajaxUrl, \/\/specify ajax url
\n pages: noOfPagesToCache \/\/ no of pages you wish to cache
\n })
\n });
\n}
\n[\/java]<\/p>\n
\n$(document).ready(function () {
\n\tvar totalRecords = 2000; \/\/ total no of records
\n\tvar ajaxUrl = "localhost:8080\/someUrl" \/\/ url that fetches the data for the table
\n enableAjaxifiedDataTable();
\n drawTable($(‘#employeeListing’), 1, totalRecords, ajaxUrl); \/\/Initializes the datatable
\n});
\n[\/java]<\/p>\n
\n– start<\/strong> \/\/ start index
\n– length<\/strong> \/\/ total no of records to fetch (in one draw)
\n– order[indexOfColumn][dir]=sortOrder<\/strong> \/\/ here indexofColumn means the column-index* which you want to sort, sortOrder would be “asc” or “desc”
\n– search[value]=searchText<\/strong> \/\/ here, searchText is the text you entered in the search text-box<\/p>\n
\ncolumn-index : The table columns are zero-indexed, where the first column has 0 index, second has 1st index, and so on…
\nIn this case : 0 – “FirstName”, 1- “LastEmail”, 2 – “Email”, 3 – “Age”, 4 – “City”, and 5 – “Salary”.<\/p>\n