jQuery DataTables and Columnfilterwidget Reset all filters button

Question

I am new to Javascript.So my question is a little silly.

I was looking for Reset all filter button for Columnfilterwidget and found this code.

$.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw/default true/) {
for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
oSettings.aoPreSearchCols[ iCol ].sSearch = '';
}
$('.filter-term').remove();
oSettings.oPreviousSearch.sSearch = '';
if(typeof bDraw === 'undefined') bDraw = true;
if(bDraw) this.fnDraw();
}

I need to bind it to a button to make it work.

$(document).ready(function(){
$("button").click(function(){
 $.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw/default true/) {
    for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
    oSettings.aoPreSearchCols[ iCol ].sSearch = '';
    }
    $('.filter-term').remove();
    oSettings.oPreviousSearch.sSearch = '';
    if(typeof bDraw === 'undefined') bDraw = true;
    if(bDraw) this.fnDraw();
    }

});
});

But it doesn't work, all i get on button click is my page get's refreshed. What i am doing wrong here???

UPDATED

$(document).ready(function(){
$("button").click(function(e){e.preventDefault();})
$("button").click(function(){
console.log("afterbutton");
 $.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw) {
console.log("insidefunction");
    for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
    oSettings.aoPreSearchCols[ iCol ].sSearch = '';
    }
    $('.filter-term').remove();
    oSettings.oPreviousSearch.sSearch = '';
    if(typeof bDraw === 'undefined') bDraw = true;
    if(bDraw) this.fnDraw();
    }

});
});

Now page is not refreshing, also code is not woking, The console only shows till afterbutton message i click on button.

Is there anything wrong with this code?

Thank you so much for the reply, as per your suggestion i've updated my code(I took button click event outside the $(document).ready(function())

$(document).ready(function(){
    $.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw) {
        for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
        oSettings.aoPreSearchCols[ iCol ].sSearch = '';
        }
        $('.filter-term').remove();
        oSettings.oPreviousSearch.sSearch = '';
        if(typeof bDraw === 'undefined') bDraw = true;
        if(bDraw) this.fnDraw();
        }

    } );

    // button click event
    $("button").click(function(e){
            e.preventDefault();
            // 'myDataTable' is the name you gave the datatable at initialisation - oTable or similar
            table.fnResetAllFilters();
      });

This still refreshes my page on button click, But if i take button click event inside $(document).ready(function() then i get error as table.fnResetAllFilters(); is not a function. table = $('#example').DataTable({ this is how i initialize the Datatable.

Maybe your default button click functionality is causing the page to refresh. If so, you need to to use preventDefault(). stackoverflow.com/questions/12064164/e-preventdefault-prevent-click — markpsmith
– markpsmith, Commented Jun 4, 2014 at 11:18
$('.filter-term').remove(); using this i am able to remove the filters but table and filters are not reset after it with fnDraw();. — user3520135
– user3520135, Commented Jun 4, 2014 at 13:39

markpsmith · Accepted Answer · 2014-06-05 10:53:38Z

1

You need to add the preventDefault() to your original button click listener, you've actually added another one.

Modify your code so it looks like this:

$(document).ready(function(){
   $("button").click(function(e){
      e.preventDefault();
      console.log("afterbutton");
      ...

It also looks like you've included the function definition inside your button click code.

It needs to look something more like this:

$(document).ready(function(){
// function definition
 $.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw/default true/) {
    for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
    oSettings.aoPreSearchCols[ iCol ].sSearch = '';
    }
    $('.filter-term').remove();
    oSettings.oPreviousSearch.sSearch = '';
    if(typeof bDraw === 'undefined') bDraw = true;
    if(bDraw) this.fnDraw();
    }
});

// button click event
$("button").click(function(e){
        e.preventDefault();
        // 'myDataTable' is the name you gave the datatable at initialisation - oTable or similar
        myDataTable.fnResetAllFilters();
  });
});

edited Jun 5, 2014 at 10:53

answered Jun 4, 2014 at 14:43

markpsmith

4,9182 gold badges38 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user3520135 Over a year ago

I changed the code as per your suggestion but still my function is not getting executed.

$.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw) { console.log("insidefunction");     for(iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {     oSettings.aoPreSearchCols[ iCol ].sSearch = '';     }     $('.filter-term').remove();     oSettings.oPreviousSearch.sSearch = '';     if(typeof bDraw === 'undefined') bDraw = true;     if(bDraw) this.fnDraw();     }

markpsmith Over a year ago

Can you see your messages in the console?

user3520135 Over a year ago

No error. onclick console gives afterbutton message, but the function after it doesnt get executed, and when i put $('.filter-term').remove(); this.fnDraw(); after console.log("afterbutton"); my filters get cleared after button click but table and filter values remain same, they don't get updated. Also i get error this.fnDraw is not a function.

user3520135 Over a year ago

Problem solved have to add it $('#dataTable').dataTable().fnResetAllFilters(); like this , Thank you so much for efforts you put in to help me.

user3520135 Over a year ago

I am facing an issue, after reset button click my table is getting redrawn but my filters are not getting updated, the filtered terms are not coming in the filters drop down.

|

Collectives™ on Stack Overflow

jQuery DataTables and Columnfilterwidget Reset all filters button

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related