Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 35396: Replace Datatables' column filters throttling with input timeout

Browse source 
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 <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
(cherry picked from commit 4509614561)
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This commit is contained in:
lmstrand 2023-11-24 14:08:21 +02:00 committed by Fridolin Somers
parent d4c38a3776
commit e819b09254
1 changed files with 18 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
koha-tmpl/intranet-tmpl/prog/js/datatables.js
View file

@ -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);
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', function () {
if ( table_dt.column(i).search() !== this.value ) {
if ( input_type == "input" ) {
search(i, this.value)
$(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('');
}