5 tabs, sharing the same Search input

CenterFound

Any suggestions on how I can have 5 separate data tables respond from a single Search input.
I have created 5 tables in a tabbed page, and when I put an value in the Searchbox, I want all 5 datatables to use this value.
What is the best way to accomplish that task?

Thank you,
CF

kthorngren

Maybe create a search API similar to this example:
https://datatables.net/examples/api/regex.html

Basically create a global search input then use the filterGlobal function to search all the tables. Here is my example for three tables:

$(document).ready( function () {
function filterGlobal () {
    $('#example').DataTable().search(
        $('#global_filter').val()
    ).draw();
    $('#example1').DataTable().search(
        $('#global_filter').val()
    ).draw();
    $('#example2').DataTable().search(
        $('#global_filter').val()
    ).draw();
}
  
  $('#example').DataTable();
  $('#example1').DataTable();
  $('#example2').DataTable();

  $('input.global_filter').on( 'keyup click', function () {
      filterGlobal();
  } );

} );

Maybe someone else can provide an alternative solution.

Kevin

CenterFound

This solution looks good on the surface, but I'm finding the draw() is resetting my input control and losing the value.

CF

kthorngren

Here is my example:
http://live.datatables.net/xidolayi/3/edit

finding the draw() is resetting my input control and losing the value.

Maybe I'm misunderstanding your comment but my search input keeps the value.

Kevin

CenterFound

Mine doesn't show in the search box, and it's responding the same as your version.
In fact, it's not working at all. I've validated the code matches between your version and mine. I will attempt to re-create on live shortly and try to determine what the cause it.
Clearly, what you have is exactly what I'm attempting to do.

CF

CenterFound

Found the issue. This is working better than expected.
Thank you very much!

tangerine

Found the issue.

Explaining it may help others.