From e819b09254d1c92077c817310d910a9efe4d74a3 Mon Sep 17 00:00:00 2001 From: lmstrand Date: Fri, 24 Nov 2023 14:08:21 +0200 Subject: [PATCH] Bug 35396: Replace Datatables' column filters throttling with input timeout This patch replaces throttling filter events with a typing timeout for datatable filtering events. This patch should increase filtering responsiveness to datatables that have column filtering enabled across Koha. To test: 1) Get a datatable with multiple results showing in intranet, for example search patrons with no search string to get all patrons in a filterable datatable result view or open Receive orders page that shows pending orders and order lines in Acquisitions like /cgi-bin/koha/acqui/parcel.pl?invoiceid=xxx 2) Type a character into a Datatable column filtering field => notice a filtering event fires right after the first character has been entered 3) Keep typing => notice multiple sequential filtering events being fired during the typing and one at the end when typing has stopped 4) Apply patch 5) Start typing into a filtering field => Note that during typing no filtering events are being fired unless the time between entering characters exceeds 500ms 6) End typing into the filter field => notice that just one filtering event fires at the end of typing if characters were entered sequentially faster than 500ms apart. Signed-off-by: Jonathan Druart Signed-off-by: Martin Renvoize Signed-off-by: Katrin Fischer (cherry picked from commit 45096145619f7033fc8a81b0ae0448d4fd2faa1e) Signed-off-by: Fridolin Somers --- koha-tmpl/intranet-tmpl/prog/js/datatables.js | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/js/datatables.js index 12f0cd7f56..e03c0c2a3e 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/datatables.js +++ b/koha-tmpl/intranet-tmpl/prog/js/datatables.js @@ -864,17 +864,24 @@ function _dt_add_filters(table_node, table_dt, filters_options = {}) { } } - var search = $.fn.dataTable.util.throttle( function ( i, val ) { - table_dt - .column( i ) - .search( val ) - .draw(); - }, 500); - - $( input_type, this ).on( 'keyup change', function () { - if ( table_dt.column(i).search() !== this.value ) { - if ( input_type == "input" ) { - search(i, this.value) + function delay(callback, ms) { + var timer = 0; + return function () { + var context = this, args = arguments; + clearTimeout(timer); + timer = setTimeout(function () { + callback.apply(context, args); + }, ms || 0); + }; + } + + $(input_type, this).on('keyup change', (delay(function () { + if (table_dt.column(i).search() !== this.value) { + if (input_type == "input") { + table_dt + .column(i) + .search(this.value) + .draw(); } else { table_dt .column(i) @@ -882,7 +889,7 @@ function _dt_add_filters(table_node, table_dt, filters_options = {}) { .draw(); } } - } ); + }, 500))); } else { $(this).html(''); } -- 2.39.2