I have a table with the "Clear All" button to allow the user to instantly remove all individual-column filters and global searches at the same time. This is a table that contains both types of filters.

The following code accomplishes the resetting when the button is clicked:

<button type="button" id="test" class="btn btn-primary">Clear Filters</button>

$('#test').click(function() {
     $("#MyTable").DataTable().search("").draw(); // clears global search bar
     $('#MyTable tfoot input').val('').change();  // clears individual column filters

But, I want the button to be hidden when there is no text in the individual column search bars in <tfoot> nor in the global search bar. I want the button to reappear as soon as the user enters any text.

This code (src, src) works to monitor the global search input, but does not keep track of the individual column search bars:

$('#MyTable').on('search.dt', function() {
    var value = $('.dataTables_filter input').val();
    alert(value); // <-- the value

So, is there a way to check if both types of search bars are empty, so that I can hide and show the "Clear All" button as described?

2 Answers

Community On Best Solutions

You may listen for keyup within all <input> elements inside DataTables wrapper and hide() your button if any those contains any characters and show() it otherwise:

$('.dataTables_wrapper input').on('keyup', () => {
    if([...$('.dataTables_wrapper input')].some(input => $(input).val().length > 0) $('#test').hide();
    else $('#test').show();

Following demo illustrates that approach:

//sample source data
const srcData = [
  {item: 'apple', type: 'fruit', qty: 5},
  {item: 'pear', type: 'fruit', qty: 4},
  {item: 'banana', type: 'fruit', qty: 7},
  {item: 'carrot', type: 'vegie', qty: 14},
  {item: 'goosberry', type: 'berry', qty: 6}

//initialize DataTables
const dataTable = $('#mytable').DataTable({
  dom: 'ft',
  data: srcData,
  columns: ['item', 'type', 'qty'].map(header => ({title: header, data: header})),

//append footer
//populate that with input fields
  $('#mytable tfoot tr').append(`<td><input colindex="${this.index()}" placeholder="${$(this.header()).text()}"></input></td>`);

//filter upon column inputs
$('#mytable').on('keyup', 'tfoot input', function(){

//implement clearall button
$('#clearall').on('click', () => {
  //empty all inputs
  [...$('.dataTables_wrapper input')].forEach(input => $(input).val(''));
  //clear individual columns search
  //clear global search

//toggle 'clearall' button visibility
$('.dataTables_wrapper input').on('keyup', () => {
    if([...$('.dataTables_wrapper input')].some(input => $(input).val().length > 0)) $('#clearall').show();
    else $('#clearall').hide();
<!doctype html>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<table id="mytable"></table>
<button id="clearall" hidden>Clear all</button>

Note, that 'clearall' button is hidden by default.

Ajay Malhotra On

Try like this:

$('#test').click(function() {
$('#myInputTextField1, #myInputTextField2').val('');
table.search('').draw(); //required after

check this:

http://jsfiddle.net/4rvmtv7d/ Thank you