From 598c7b19be294965cd3e45d121a6fef4b93153c8 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 30 Apr 2019 14:57:59 +0000 Subject: [PATCH] Bug 22811: Add button to clear DataTables filtering This patch adds a "clear filter" button to the global DataTables configuration. The button will appear if: - There is no custom DOM configuration applied to the DataTable instance. - The DataTable has the search form enabled. The new button should be disabled by default. Entering a search term in the form should enable it. To test, apply the patch and clear your browser cache if necessary. View various pages with various DataTables configurations and confirm that everything looks correct and the new "Clear filter" button doesn't appear when there is no DataTable search field. For example: - Administration -> Libraries - Administration -> Currencies - Reports -> Saved reports - Circulation -> Check out - Tools -> News Signed-off-by: Liz Rea Signed-off-by: Katrin Fischer --- .../prog/en/includes/columns_settings.inc | 13 ++++++- koha-tmpl/intranet-tmpl/prog/js/datatables.js | 41 ++++++++++++++++++++-- 2 files changed, 51 insertions(+), 3 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc index 6d1bf6acfe..abfe065afd 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/columns_settings.inc @@ -60,6 +60,17 @@ function KohaTable(id_selector, dt_parameters, columns_settings, add_filters) { dt_parameters[ "buttons" ] = [ { + fade: 100, + className: "dt_button_clear_filter", + titleAttr: _("Clear filter"), + enabled: false, + text: ' ' + _("Clear filter") + '', + action: function ( e, dt, node, config ) { + dt.search( "" ).draw("page"); + node.addClass("disabled"); + } + }, + { extend: 'colvis', fade: 100, columns: included_ids, @@ -106,7 +117,7 @@ function KohaTable(id_selector, dt_parameters, columns_settings, add_filters) { deactivate_filters(id_selector); } - $(".columns_controls,.export_controls").tooltip(); + $(".dt_button_clear_filter, .columns_controls, .export_controls").tooltip(); return table; } diff --git a/koha-tmpl/intranet-tmpl/prog/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/js/datatables.js index 0e95d1e2f0..dd07ddc04d 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/datatables.js +++ b/koha-tmpl/intranet-tmpl/prog/js/datatables.js @@ -32,9 +32,38 @@ var dataTablesDefaults = { } }, "dom": '<"top pager"ilpfB>tr<"bottom pager"ip>', - "buttons": [], + "buttons": [{ + fade: 100, + className: "dt_button_clear_filter", + titleAttr: _("Clear filter"), + enabled: false, + text: ' ' + _("Clear filter") + '', + available: function ( dt ) { + // The "clear filter" button is made available if this test returns true + if( dt.settings()[0].aanFeatures.f ){ // aanFeatures.f is null if there is no search form + return true; + } + }, + action: function ( e, dt, node ) { + dt.search( "" ).draw("page"); + node.addClass("disabled"); + } + }], "aLengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, window.MSG_DT_ALL || "All"]], - "iDisplayLength": 20 + "iDisplayLength": 20, + initComplete: function( settings) { + var tableId = settings.nTable.id + // When the DataTables search function is triggered, + // enable or disable the "Clear filter" button based on + // the presence of a search string + $("#" + tableId ).on( 'search.dt', function ( e, settings ) { + if( settings.oPreviousSearch.sSearch == "" ){ + $("#" + tableId + "_wrapper").find(".dt_button_clear_filter").addClass("disabled"); + } else { + $("#" + tableId + "_wrapper").find(".dt_button_clear_filter").removeClass("disabled"); + } + }); + } }; @@ -567,3 +596,11 @@ function footer_column_sum( api, column_numbers ) { $( api.column( column_number ).footer() ).html(total.format_price()); }; } + +function filterDataTable( table, column, term ){ + if( column ){ + table.column( column ).search( term ).draw("page"); + } else { + table.search( term ).draw("page"); + } +} -- 2.11.0