Merge pull request #1241 from madawas/master

Add a delay for data tables server side paging

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,49 @@
+/**
+ * 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_
+ */
+
+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;
+};