Remove search filter on Datatable

Question

I have applied a button in my DataTable, which on click, filters the data table, to just show the clicked row.

table initialization is:

       var oDatatable = $("#tblDataTable").DataTable({
            dom: '<"top"CRTl><"clear">rt<"bottom"ip><"clear">',
            columns: [
                                   { data: 'Message' },
                { data: 'MessageId' },
                { data: null, "defaultContent": "<button id=\"tblRowData\">Click</button>"}
            ],

            "columnDefs": [
             { "visible": false, "targets": 0 }
            ]
           });

and my click event is:

    $('#tblDataTable tbody').on('click', 'button', function (event) {
    var data = oDataTable.row($(this).parents('tr')).data();
    oDataTable
     .columns(8)
     .search(data['MessageId'])
     .draw();

This all work perfectly fine, but now I want to reset the filters, when any other action on the page is carried out. For instance, changing a datetime picker.

How can I check if the datatable has a seach filter applied, and remove it (i.e. resetting the table back, prior to the click event).

score 61 · Accepted Answer · edited Feb 10 '16 at 17:09

61

Maybe you are looking at something like this: http://www.datatables.net/plug-ins/api/fnFilterClear
You could clear the search in a very simple way:

var table = $('#example').DataTable();
table
 .search( '' )
 .columns().search( '' )
 .draw();

edited Feb 10 '16 at 17:09

AaronS

7,649
5
30
56

answered Dec 10 '14 at 13:38

Leandro Carracedo

7,233
2
44
50

score 6 · Answer 2 · answered Sep 19 '18 at 18:49

6

More easy

var table = $('#example').DataTable();
table
.search("").draw();

answered Sep 19 '18 at 18:49

Alex Montoya

4,697
1
30
31

Corgalore · Answer 3 · 2020-01-31T17:55:47.413

If you're looking to check for an existing search filter being applied, then clear out a specific filter only, you can accomplish it like so:

    var table = $('#example').DataTable();

    // The index of the column being searched
    var colIdx = 3;

    // Retrieve the current stored state of the table
    var tableState = table.state.loaded();

    // Retrieve the stored search value of the column
    var filterForColIdx = tableState.columns[colIdx].search.search;

    if ( '' !== filterForColIdx ) {
      // Clear the search term and re-draw
      table
       .columns( colIdx )
       .search( '' )
       .draw();
    }

Note: I'm using the 'stateSave': true option on the Datatable to keep state between page requests.

Remove search filter on Datatable

3 Answers3

Linked