To disable the live filtering of SearchPanes and apply the filters only when the user clicks an apply button, you can modify your DataTable initialization as follows:
new DataTable('#results_table', {
pageLength: 100,
fixedHeader: true,
lengthMenu: [ [25, 50, 100, 1000, 2000, -1], [25, 50, 100, 1000, 2000, "All"] ],
fixedColumns: {
left: 4
},
serverSide: true,
processing: true,
scrollX: true,
dom: 'PBlfrtip',
bInfo: true,
searching: false,
buttons: [
{
extend: 'excel',
text: 'Export Filtered to Excel',
filename: 'filtered-data-export',
exportOptions: {
modifier: {
page: 'all',
selected: null,
search: 'applied',
}
},
action: function(e, dt, node, config) {
var dtButton = this;
var currentPageLen = dt.page.len();
var currentPage = dt.page.info().page;
dt.one( 'draw', function () {
$.fn.DataTable.ext.buttons.excelHtml5.action.call(dtButton, e, dt, node, config);
setTimeout(function() {
dt.page.len(currentPageLen).draw();
dt.page(currentPage).draw('page');
}), 500;
});
dt.page.len(-1).draw();
}
}
],
ajax: {
url: 'pagefeed?draw=1&start=0&length=null&order%5B0%5D%5Bcolumn%5D=2&order%5B0%5D%5Bdir%5D=asc',
dataSrc: function(json) {
return json.data;
}
},
columns: [
{ data: 'Rep_Name' },
{ data: 'Client_Name' },
{ data: 'Description_1' },
{ data: 'STK_GRP_DESCR'},
{ data: '2022' },
{ data: '2023' },
{ data: '2024' },
{ data: 'cy-py' },
{ data: '2024-01' },
{ data: '2024-02' },
{ data: '2024-03' },
{ data: '2024-04' },
{ data: '2024-05' },
{ data: '2024-06' },
{ data: '2024-07' },
{ data: '2024-08' },
{ data: '2024-09' },
{ data: '2024-10' },
{ data: '2024-11' },
{ data: '2024-12' },
{ data: 'Main Group'}
],
searchPanes: {
initCollapsed: false,
columns: [0, 1, 2, 3, 20],
cascadePanes: false,
},
initComplete: function() {
var table = this;
$('#applyFilter').on('click', function() {
table.searchPanes.rebuildPane();
table.draw();
});
}
});
In this modified initialization:
- I removed the
searching: falseoption to enable searching via SearchPanes. - I added an
initCompletecallback function, which is called when the DataTable is fully initialized. Inside this callback, I added an event listener to the apply filter button (#applyFilter). When clicked, it triggers the rebuild of the search panes and redraws the DataTable.
This setup ensures that the filters are applied only when the user clicks the apply filter button, rather than being applied live as the user interacts with the search panes.