Datatable clear filter not working on first click

MallikKolli

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

kthorngren

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

MallikKolli

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>

MallikKolli

from scrrenshots above when we click on clear filter above it's not clearing data in search input controls and not reloading grid.

colin

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

MallikKolli

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?

kthorngren

See this example that shows using a change event. When the input is empty the column().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

MallikKolli

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.

$(document).on("keyup change", ".txtpoccrFilterCls", function () {
    filterChange(this, false);
});

colin

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

MallikKolli

Hi Colin,

We got the solution using stop propagation. Thanks for your support.

event.stopPropagation()

Thanks,
Mallik

MallikKolli

Hi Team, Can you please remove the screenshot's and the data above. I was not able to cleanup the content.

colin

@MallikKolli Yep, that's all deleted! And glad all sorted.