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.

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}}

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('<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;
+                this.fnSetFilteringDelay(1000);
+
+                /**
+                 *  create sorting dropdown menu for list table advance operations
+                 */
                 if (table.hasClass('sorting-enabled')) {
                     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>');

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;
+};