Button To Clear Search Filter On Page With Two DataTables - Button On Top Table Clears Both Filters

Joyrex

I've managed to set up a JSFiddle to demonstrate the issue I am having: http://live.datatables.net/newiboje/1/edit?js,console,output

I have a scenario where I have a page with two DataTables. Both have unique IDs, unique JS variables to reference the table, etc. I have also styled it with the Bootstrap 4 integration to have a button to clear the search filter for each table. There too, each table is referenced uniquely, etc.

What is happening (and I have included output to console to see which button is being clicked) is if I search on the top table, then search on the bottom table (so both tables are showing filtered results) and then click the button to clear the search on the bottom table, the bottom table gets cleared as expected. However, If I click the button to clear the top table, instead of clearing just the top table, it clears both tables! The console shows that the click event is targeting both tables whereas the bottom table only targets the bottom table as it should be.

I don't think this is a bug in DataTables (I would imagine it would have been discovered by now) and clearing the filter with the ESC key (Chrome) does only clear the appropriate table regardless of order. I am sure it is in how I am targeting the filter:

$('button.btn.btn-danger').click(function() {
    $('#example_filter input').val('');
        console.log('table1 clicked');
        table.search('').columns().search('').draw();
    } );

As you can see from the JSFiddle above, the same code is used on the second table, but the JS variable to reference the table and the ID identifying the table is different:

$('button.btn.btn-danger').click(function() {
    $('#example2_filter input').val('');
        console.log('table2 clicked');
        table2.search('').columns().search('').draw();
    } );

Anybody that can point out the error of my ways, I would greatly appreciate it!

colin

Hi @Joyrex ,

The problem is because the selector for the button wasn't differentiating between the two tables. If you look at this fixed example here, it is specifically targeting each now, and is working as expected.

Cheers,

Colin

Joyrex

@colin I knew that had to be related to the problem!

I thought I tried making each button unique during my troubleshooting (as you did by including the ID in the selector), but I guess I missed it somehow.

I understand now why clearing the bottom search worked, while clearing the upper caused both tables' filters to be cleared - the click event 'bubbled down' the DOM, right?

Thanks again - you helped me with another issue recently and I really appreciate it!