javascript - jquery datatables: how to clear column search filter - Stack Overflow

admin管理员组

文章数量:1315792

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

Share Improve this question Follow edited Jan 28, 2015 at 10:29 Shaeldon 88344 gold badges1818 silver badges2828 bronze badges asked Jan 28, 2015 at 9:47 FinglishFinglish 9,9861515 gold badges7676 silver badges118118 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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();

本文标签： javascriptjquery datatables how to clear column search filterStack Overflow