CODEWITHSUNDEEP
jquerydatatables
Onera
Onera

Reputation: 717

how to reset the filters in a datatable

I am unable to clear the filters using the fnFilter().

Here is my HTML code :

<table id="todays _table>

               <thead>
                 <tr id="todays_search_input_feilds">
                     <td class="input_filter">
                        <input type="text" id="type" class="form-control search_events">
                    </td>
                    <td class="input_filter">
                        <input type="text" id="vendor " class="form-control search_events">
                    </td>
                </tr>
            </thead>
    </table>

And Here is my JQuery Code

$('#todays_table').dataTable().fnFilter('');
    oTable.fnClearTable();

I tried clearing using the following approach:

$('input[class="form-control search_events"]').val('');

But the problem with this is that, it is clearing the value but the data is not loading in the dataTable. It is loading only after i click on any of the filters

Upvotes: 14

Views: 64010

Answers (6)

Aline Matos
Aline Matos

Reputation: 497

For those who's performing a search with column and regex:

$('#example').DataTable().column('').search('').draw();

Upvotes: 7

xpredo
xpredo

Reputation: 1533

DataTables 1.10+ new API 

var D_T = $(selector).DataTable();
     D_T.
         search('').
         columns().search('').visible( true, true ).order('asc' ).
         colReorder.reset().
         page.len(10).
         state.clear().
         draw() ;

Upvotes: 0

Chandana
Chandana

Reputation: 122

I am using DataTables 1.10.15 and it is working for as below.

        var oTable = $('#example').DataTable();
        $.fn.dataTableExt.afnFiltering.length = 0;
        oTable.draw();

Upvotes: 2

akshika gupta
akshika gupta

Reputation: 1

 <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.9/api/fnFilterClear.js"></script>

  $.extend( $.fn.dataTable.defaults, {
 fnInitComplete: function(oSettings, json) {
   var btnClear = $('#clear_all');
  btnClear.appendTo($('#' + oSettings.sTableId).parents('.dataTables_wrapper').find('.dataTables_filter'));

  $('#clear_all').click(function () {
   $('#' + oSettings.sTableId).dataTable().fnFilterClear();
   $("input.column_filter").val('');

       $.fn.dataTable.ext.search.pop();
  });

 }

});

Upvotes: 0

kalibrain
kalibrain

Reputation: 938

DataTables 1.10+ new API can achieve the same effect without the requirement for plug-ins using the following chaining:

var table = $('#example').DataTable(); 
table.search('').columns().search('').draw();

If you are using earlier versions of DataTables, you need to include plugin library called fnFilterClear and call:

var table = $('#example').DataTable(); 
table.fnFilterClear();

Please see this DataTables API page for more information and the plugin that needs to be used for earlier versions of DataTable.

Upvotes: 10

Gyrocode.com
Gyrocode.com

Reputation: 58880

To reset custom filters

If you're using custom filtering function as in this example, you need to clear controls involved before filtering and redrawing the table.

$('input.search_events').val('');
$('#todays_table').dataTable().fnDraw();

To reset global search

  • jQuery DataTables 1.9+

    Call fnFilter() API method with empty string as a first argument to reset the global search and redraw the table.

    For example:

    $('#example').dataTable().fnFilter('');

  • jQuery DataTables 1.10

    Call search() API method with empty string as a first argument followed by call to draw() API method to reset the global search and redraw the table.

    For example:

    $('#example').DataTable().search('').draw();

Upvotes: 28

Related Questions