title: jQuery DataTables and Columnfilterwidget Reset all filters button
body: <p>I am new to Javascript.So my question is a little silly.</p>
  
  <p>I was looking for Reset all filter button for Columnfilterwidget and found this code.</p>
  
  <pre><code>$.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw/default true/) {
  for(iCol = 0; iCol &lt; oSettings.aoPreSearchCols.length; iCol++) {
  oSettings.aoPreSearchCols[ iCol ].sSearch = '';
  }
  $('.filter-term').remove();
  oSettings.oPreviousSearch.sSearch = '';
  if(typeof bDraw === 'undefined') bDraw = true;
  if(bDraw) this.fnDraw();
  }
  </code></pre>
  
  <p>I need to bind it to a button to make it work.</p>
  
  <pre><code>$(document).ready(function(){
  $("button").click(function(){
   $.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw/default true/) {
      for(iCol = 0; iCol &lt; oSettings.aoPreSearchCols.length; iCol++) {
      oSettings.aoPreSearchCols[ iCol ].sSearch = '';
      }
      $('.filter-term').remove();
      oSettings.oPreviousSearch.sSearch = '';
      if(typeof bDraw === 'undefined') bDraw = true;
      if(bDraw) this.fnDraw();
      }
  
  });
  });
  </code></pre>
  
  <p>But it doesn't work, all i get on button click is my page get's refreshed.
  What i am doing wrong here???</p>
  
  <p>UPDATED</p>
  
  <pre><code>$(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 &lt; oSettings.aoPreSearchCols.length; iCol++) {
      oSettings.aoPreSearchCols[ iCol ].sSearch = '';
      }
      $('.filter-term').remove();
      oSettings.oPreviousSearch.sSearch = '';
      if(typeof bDraw === 'undefined') bDraw = true;
      if(bDraw) this.fnDraw();
      }
  
  });
  });
  </code></pre>
  
  <p>Now page is not refreshing, also code is not woking,
  The console only shows till afterbutton message i click on button.</p>
  
  <p>Is there anything wrong with this code?</p>
  
  <p>Thank you so much for the reply, as per your suggestion i've updated my code(I took button click event outside the <code>$(document).ready(function()</code>)</p>
  
  <pre><code>$(document).ready(function(){
      $.fn.dataTableExt.oApi.fnResetAllFilters = function (oSettings, bDraw) {
          for(iCol = 0; iCol &lt; 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();
        });
  </code></pre>
  
  <p>This still refreshes my page on button click, But if i take button click event inside <code>$(document).ready(function()</code> then i get error as <code>table.fnResetAllFilters();</code> is not a function.  <code>table = $('#example').DataTable({</code> this is how i initialize the Datatable. </p>