From 6b8d555314cf3e315fd3369fb946cca034c7f467 Mon Sep 17 00:00:00 2001 From: Madawa Soysa Date: Thu, 22 Mar 2018 16:52:34 +0530 Subject: [PATCH] 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. --- .../data-tables-extended.hbs | 1 + .../dataTables.extended.serversidepaging.js | 7 ++- .../js/dataTables.fnSetFilteringDelay.js | 54 +++++++++++++++++++ 3 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.fnSetFilteringDelay.js diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/data-tables-extended.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/data-tables-extended.hbs index 0bb33aa8cb8..497a259d456 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/data-tables-extended.hbs +++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/data-tables-extended.hbs @@ -24,5 +24,6 @@ {{~js "js/dataTables.bootstrap.js"}} {{~js "js/dataTables.responsive.min.js"}} {{~js "js/dataTables.extended.js"}} + {{~js "js/dataTables.fnSetFilteringDelay.js"}} {{~js "js/dataTables.extended.serversidepaging.js"}} {{/zone}} diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.serversidepaging.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.serversidepaging.js index f23559fe284..4eb499f9f52 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.serversidepaging.js +++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.serversidepaging.js @@ -248,9 +248,14 @@ $.fn.datatables_extended_serverside_paging = function (settings, url, dataFilter search_input.before('').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; + this.fnSetFilteringDelay(1000); + + /** + * create sorting dropdown menu for list table advance operations + */ if (table.hasClass('sorting-enabled')) { var dropdownmenu = $(''); diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.fnSetFilteringDelay.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.fnSetFilteringDelay.js new file mode 100644 index 00000000000..23c50ce30be --- /dev/null +++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.fnSetFilteringDelay.js @@ -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; +};