I am using jquery datatables to make my table searchable. I have a dropdown that filters a gender column:

$("#genderDrop").on("change", function(e) {
    var gender = $(this).val();

    formTable.column(2).search(gender).draw();
});

this works fine, but now I want to be able to remove the filter when the user selects "all" from the dropdown. Here is my attempt:

$("#genderDrop").on("change", function(e) {
    var gender = $(this).val();
    if (gender != "all") {
        formTable.column(2).search(gender).draw();
    } else {
         formTable.column(2).search("").draw();
    }
});

Instead of removing the filter this just searches for an empty string, but I can't work out how to change this so it removes the filter. I also tried:

formTable.column(2).search("*").draw();

and  

formTable.column(2).search().draw();

but without any success.

I am using jquery datatables to make my table searchable. I have a dropdown that filters a gender column:

$("#genderDrop").on("change", function(e) {
    var gender = $(this).val();

    formTable.column(2).search(gender).draw();
});

this works fine, but now I want to be able to remove the filter when the user selects "all" from the dropdown. Here is my attempt:

$("#genderDrop").on("change", function(e) {
    var gender = $(this).val();
    if (gender != "all") {
        formTable.column(2).search(gender).draw();
    } else {
         formTable.column(2).search("").draw();
    }
});

Instead of removing the filter this just searches for an empty string, but I can't work out how to change this so it removes the filter. I also tried:

formTable.column(2).search("*").draw();

and  

formTable.column(2).search().draw();

but without any success.

• javascript
• jquery
• datatables

3 Answers 3

You can use the option All from gender select with empty value:

<option value="">All</option>

them your code will work:

$("#genderDrop").on("change", function(e) {
    var gender = $(this).val();

    formTable.column(2).search(gender).draw();
});

Using DataTables example as base: http://jsfiddle/PauloSegundo/g15xakh5/

you can try the below:

function fnResetAllFilters() {
  var oSettings = oTable.fnSettings();
  for (iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
    oSettings.aoPreSearchCols[iCol].sSearch = '';
  }
  oTable.fnDraw();
}

To remove all filters and global filters, please refer to below link: https://datatables/plug-ins/api/fnFilterClear

Try this way:

var table = $('#tableHere').DataTable().destroy();
table.state.clear();