Datatable clear filter not working on first click
Datatable clear filter not working on first click
![MallikKolli](https://secure.gravatar.com/avatar/1dd24bdd1d1cd6a15b35f08cf26e2056/?default=https%3A%2F%2Fvanillicon.com%2F1dd24bdd1d1cd6a15b35f08cf26e2056_200.png&rating=g&size=120)
var table = $(trimTblId).DataTable({
paging: true,
"pageLength": _pageSize,
searching: true,
stateSave: true,
info: false,
select: false,
"lengthChange": false,
tabIndex: "-1",
"aaSorting": [],
orderCellsTop: true,
dom: 'Bfrtip',
"language": {
paginate: {
next: '<i class="fa fa-angle-right"></i>',
previous: '<i class="fa fa-angle-left"></i>'
}
},
'columnDefs': [
{
'targets': [8],
'orderable': false
}],
buttons: {
dom: 'Bfrtip',
dom: {
button: {
className: 'btn btn-dark-green waves-effect'
}
},
"buttons": [{
extend: 'excelHtml5',
exportOptions: {
columns: [1, 2,4, 5, 6, 7]
},
text: '<i class="far fa-file-excel"></i>',
titleAttr: 'Excel'
},
{
text: '<i class="fa fa-filter" style="font-size: 14px;"></i><i class= "fa fa-times" style="font-size: 10px;position:absolute;"></i>',
titleAttr: 'Clear all filters',
action: function (e, dt, node, config) {
ClearFiltersData(item);
}
}
]
},
"fnDrawCallback": function (oSettings) {
var table = $('#expDuplicateInvoiceslist').dataTable();
//Get the total rows
if (table.fnSettings().fnRecordsTotal() < (parseInt(_pageSize) + 1)) {
$('.dataTables_paginate').hide();
}
},
'columnDefs': [{
'targets': [3,8], /* column index */
'orderable': false, /* true or false */
},
{
'searchable': false,
'targets': [0]
}]
});
$('#expDuplicateInvoiceslist_filter').css('display', 'none');
$('.dt-buttons').addClass('expDuplicate_button');
$('div.duplicateheader').append($("div.expDuplicate_button"));
if (document.URL.includes("isredirectionFromSearch=true")) {
$('div.expDuplicate_button').css('display', 'none');
}
table.on('search.dt', function (e) {
var totalDisplayRecord = table.page.info().recordsDisplay;
if (totalDisplayRecord == 0) {
$('#duplicateInvoiceDetailsDiv').html('');
}
else {
//$("#expDuplicateInvoiceslist>tbody>tr:first").trigger('click');
var filteredRows = table.rows({ search: 'applied' }).nodes(); // Get the filtered rows
// Check if there are any filtered rows
if (filteredRows.length > 0) {
var firstRow = $(filteredRows[0]);
}
// Trigger the click event on the first visible row
firstRow.trigger('click');
$('#expDuplicateInvoiceslist tbody tr.active').removeClass("active");
firstRow.addClass('active');
}
});
Column level filter applied, when click on clear all filter the event is not firing first time, 2nd time its working,
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
This question has an accepted answers - jump to answer
Answers
Please provide a link to your page or a test case replicating the issue so we can see how your column level filter works.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Hi Kevin,
the issue is when we click ok filter first time its not clearing the filters, above the code we have in project and we will not be able to share the link but here is the code from HTML output
<TABLE DELETED BY MOD>
from scrrenshots above when we click on clear filter above it's not clearing data in search input controls and not reloading grid.
Those column filters were implemented within your own code, they're not a standard part of DataTables. So when the value is clear from that input element, you would also need to initiate a new search against that column. It would be easiest to have a
change
event that just searches on the changed string, so that would work whether it's an empty string or a value to filter upon.Colin
Hi colin,
Thanks for quick response. can you give example on how the standard way of clearing column level filters? also do you mean by adding a function for change event for clear filter button?
See this example that shows using a
change
event. When the input is empty thecolumn().search()
parameter will be an empty string which will clear the search for that column.If you still need help then please build a simple test case with your column search code so we can help debug and offer more specific suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Below code is causing the issue to block the entire screen first time after we search anything from input column filter. Please suggest any alternatives. we want the filter to be happened when ever we type something in input column filters.
Can you update Kevin's test case, or create your own, to demonstrate the problem please. It makes it easier to understand what you're doing if it can be seen in action.
Colin
Hi Colin,
We got the solution using stop propagation. Thanks for your support.
event.stopPropagation()
Thanks,
Mallik
Hi Team, Can you please remove the screenshot's and the data above. I was not able to cleanup the content.
@MallikKolli Yep, that's all deleted! And glad all sorted.