Jquery Datatables And Columnfilterwidget Reset All Filters Button

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.fnResetAllFilt

Solution 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/defaulttrue/) {
    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();
  });
});