5 tabs, sharing the same Search input

5 tabs, sharing the same Search input

CenterFoundCenterFound Posts: 30Questions: 10Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • CenterFoundCenterFound Posts: 30Questions: 10Answers: 0

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

    CF

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    edited March 2017 Answer ✓

    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

  • CenterFoundCenterFound Posts: 30Questions: 10Answers: 0

    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

  • CenterFoundCenterFound Posts: 30Questions: 10Answers: 0

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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Found the issue.

    Explaining it may help others.

This discussion has been closed.