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>

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

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

1
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
$('#mytable').append('<tfoot><tr></tr></tfoot>');
//populate that with input fields
dataTable.columns().every(function(){
  $('#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(){
  dataTable.column($(this).attr('colindex')).search($(this).val()).draw();
});

//implement clearall button
$('#clearall').on('click', () => {
  //empty all inputs
  [...$('.dataTables_wrapper input')].forEach(input => $(input).val(''));
  //clear individual columns search
  dataTable.columns().every(function(){this.search('')});
  //clear global search
  dataTable.search('');
  //re-draw
  dataTable.draw();
});

//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>
<html>
<head>
  <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">
</head>
<body>
<table id="mytable"></table>
<button id="clearall" hidden>Clear all</button>
</body>
</html>

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

0
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