Add a delay for data tables server side paging

DataTables library instantiates an ajax request for each key release when searching/filtering. in a system with a larger dataset, many requests are made to the back end for a longer keyword search which is a huge overload.

Also, sometimes since the request initialized for the first character returns the largest subset of data (if available) this request may take a longer time to process. Since DataTables update the table in the order that the response comes, the final result shown would be the last response received which can be incorrect.

This commit resolves the above issue by enabling a delay before the requests made using DataTables fnSetFilteringDelay plugin.
revert-70aa11f8
Madawa Soysa 7 years ago
parent 7620d7ea5d
commit 6b8d555314

@ -24,5 +24,6 @@
{{~js "js/dataTables.bootstrap.js"}} {{~js "js/dataTables.bootstrap.js"}}
{{~js "js/dataTables.responsive.min.js"}} {{~js "js/dataTables.responsive.min.js"}}
{{~js "js/dataTables.extended.js"}} {{~js "js/dataTables.extended.js"}}
{{~js "js/dataTables.fnSetFilteringDelay.js"}}
{{~js "js/dataTables.extended.serversidepaging.js"}} {{~js "js/dataTables.extended.serversidepaging.js"}}
{{/zone}} {{/zone}}

@ -248,9 +248,14 @@ $.fn.datatables_extended_serverside_paging = function (settings, url, dataFilter
search_input.before('<i class="fw fw-search search-icon"></i>').removeClass('input-sm'); search_input.before('<i class="fw fw-search search-icon"></i>').removeClass('input-sm');
/** /**
* create sorting dropdown menu for list table advance operations * Enabling filtration delay while searching for a longer keyword. 1 second delay is introduced here.
*/ */
var table = this; var table = this;
this.fnSetFilteringDelay(1000);
/**
* create sorting dropdown menu for list table advance operations
*/
if (table.hasClass('sorting-enabled')) { if (table.hasClass('sorting-enabled')) {
var dropdownmenu = $('<ul class="dropdown-menu arrow arrow-top-right dark sort-list ' + var dropdownmenu = $('<ul class="dropdown-menu arrow arrow-top-right dark sort-list ' +
'add-margin-top-2x"><li class="dropdown-header">Sort by</li></ul>'); 'add-margin-top-2x"><li class="dropdown-header">Sort by</li></ul>');

@ -0,0 +1,54 @@
/**
* Enables filtration delay for keeping the browser more responsive while
* searching for a longer keyword.
*
* This can be particularly useful when working with server-side processing,
* where you wouldn't typically want an Ajax request to be made with every key
* press the user makes when searching the table.
*
* Please note that this plug-in has been deprecated and the `dt-init
* searchDelay` option in DataTables 1.10 should now be used. This plug-in will
* not operate with v1.10+.
*
* @name fnSetFilteringDelay
* @summary Add a key debouce delay to the global filtering input of a table
* @author [Zygimantas Berziunas](http://www.zygimantas.com/),
* [Allan Jardine](http://www.sprymedia.co.uk/) and _vex_
*
* @example
* $(document).ready(function() {
* $('.dataTable').dataTable().fnSetFilteringDelay();
* } );
*/
jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function (oSettings, iDelay) {
var _that = this;
if (iDelay === undefined) {
iDelay = 250;
}
this.each(function (i) {
if (typeof _that.fnSettings().aanFeatures.f !== 'undefined') {
$.fn.dataTableExt.iApiIndex = i;
var
oTimerId = null,
sPreviousSearch = null,
anControl = $('input', _that.fnSettings().aanFeatures.f);
anControl.unbind('keyup search input').bind('keyup search input', function () {
if (sPreviousSearch === null || sPreviousSearch != anControl.val()) {
window.clearTimeout(oTimerId);
sPreviousSearch = anControl.val();
oTimerId = window.setTimeout(function () {
$.fn.dataTableExt.iApiIndex = i;
_that.fnFilter(anControl.val());
}, iDelay);
}
});
return this;
}
});
return this;
};
Loading…
Cancel
Save