Search multiple tables using Datatables

user_3089170 0
Viewed 10637

Ok, jquery amateur alert before I get started.

I'm using Datatables and cannot seem to get the fnFilterAll API to function, even with the example given on their site. I've exhausted an online google operation over a period of several hours last night and to my frustration I couldn't find an actual working example of the fnFilterAll.

fnFilterAll API is to allow searching of multiple tables (for those wondering).

To keep things simple at the moment, I created a split page with two tables. I think I'm missing something very elementary though, like perhaps I have to specify columns, but not sure where to do so (in this.value area?). At any rate, here's my code as a starting point:

Any assistance greatly appreciated. Thank you for your time.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
        <title>Testing Multi-Table Search Filter</title>
        <style type="text/css" title="currentStyle">
            @import"DataTables/media/css/demo_page.css";
            @import"DataTables/media/css/demo_table.css";
            #div1 {
                background: #FFFDE0;
                width: 49%;
                height: 50%;
                float: left;
            }
            #div2 {
                background: #E2FFE0;
                width: 49%;
                height: 50%;
                float: left;
            }
            #div-mid-spacer {
                width: 2%;
                height: auto;
                float: left;
            }
        </style>
        <script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.js"></script>
        <script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8">
            $.fn.dataTableExt.oApi.fnFilterAll = function(oSettings, sInput, iColumn, bRegex, bSmart) {
                var settings = $.fn.dataTableSettings;

                for (var i = 0; i < settings.length; i++) {
                    settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
                }
            };

            $(document).ready(function() {
                $('#table1').dataTable({
                    "bPaginate": false,

                });
                var oTable0 = $("#table1").dataTable();

                $("#table1").keyup(function() {
                    // Filter on the column (the index) of this element
                    oTable0.fnFilterAll(this.value);
                });
            });

            $(document).ready(function() {
                $('#table2').dataTable({
                    "bPaginate": false,

                });
                var oTable1 = $("#table2").dataTable();

                $("#table2").keyup(function() {
                    // Filter on the column (the index) of this element
                    oTable1.fnFilterAll(this.value);
                });
            });
        </script>
    </head>

    <body>
        <div id="dt_example">
            <div id="div1" style="overflow: auto;"> <b>Current</b>:
                <br>
                <table class='display' id='table1'>
                    <thead>
                        <tr>
                            <th valign='top' width='175'>Fname</th>
                            <th valign='top' width='100'>Lname</th>
                            <th valign='top' width='50'>Age</th>
                            <th valign='top' width='100'>Check</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John</td>
                            <td>Smith</td>
                            <td>44</td>
                            <td>--</td>
                        </tr>
                        <tr>
                            <td>Mary</td>
                            <td>Doe</td>
                            <td>54</td>
                            <td>--</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="div-mid-spacer">&nbsp;</div>
            <div id="div2"> <b>Last</b>:
                <br>
                <table class='display' id='table2'>
                    <thead>
                        <tr>
                            <th valign='top' width='175'>Fname</th>
                            <th valign='top' width='100'>Lname</th>
                            <th valign='top' width='50'>Age</th>
                            <th valign='top' width='100'>Check</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>John</td>
                            <td>Smith</td>
                            <td>44</td>
                            <td>--</td>
                        </tr>
                        <tr>
                            <td>Mary</td>
                            <td>Doe</td>
                            <td>54</td>
                            <td>--</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        </div>
    </body>

</html>
datatables jquery
5 Answers

Since DataTables 1.10, API is available and preferred way would be to use API search function:

$("#SearchTables").keyup(function () {
    $('table').DataTable().search(this.value).draw();
});
Janis_Veinbergs_501730

I made another version based on @bob work but, I cleaned the code to be tidy and have only one search box and work with a higher version of dataTables.

Fiddle source

           $.fn.dataTableExt.oApi.fnFilterAll = function(oSettings, sInput, iColumn, bRegex, bSmart) {
             var settings = $.fn.dataTableSettings;

             for (var i = 0; i < settings.length; i++) {
               settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart);
             }
           };

           $(document).ready(function() {
             $('.display').dataTable({
               "bPaginate": false,
               "sDom": "<'dt-toolbar'<'col-sm-6 col-xs-12 hidden-xs'l>r>" +
                 "t" + "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",

             });
             var oTable0 = $("#table1").dataTable();
             var oTable1 = $("#table2").dataTable();
             $("#Search_All").keyup(function() {
               oTable0.fnFilterAll(this.value);
               oTable1.fnFilterAll(this.value);
             });
           });
            #div1 {
              background: #FFFDE0;
              width: 49%;
              height: 50%;
              float: left;
            }

            #div2 {
              background: #E2FFE0;
              width: 49%;
              height: 50%;
              float: left;
            }

            #div-mid-spacer {
              width: 2%;
              height: auto;
              float: left;
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Testing Multi-Table Search Filter2</title>Search All Tables
<input type="text" id="Search_All">
<br>
<br>
<div id="dt_example">
  <div id="div1" style="overflow: auto;"> <b>Current</b>:
    <br>
    <table class='display' id='table1'>
      <thead>
        <tr>
          <th valign='top' width='175'>Fname</th>
          <th valign='top' width='100'>Lname</th>
          <th valign='top' width='50'>Age</th>
          <th valign='top' width='100'>Check</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Smith</td>
          <td>44</td>
          <td>--</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Doe</td>
          <td>54</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="div-mid-spacer">&nbsp;</div>
  <div id="div2"> <b>Last</b>:
    <br>
    <table class='display' id='table2'>
      <thead>
        <tr>
          <th valign='top' width='175'>Fname</th>
          <th valign='top' width='100'>Lname</th>
          <th valign='top' width='50'>Age</th>
          <th valign='top' width='100'>Check</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Smith</td>
          <td>44</td>
          <td>--</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Doe</td>
          <td>54</td>
          <td>--</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js'></script>

user_17439720

there is an easier way to do this (EDIT as said Janis already), with an event set on the search input, to search on the class of multiple tables instead of the id. Here it will search within all the datatable with class="datatable"

$('#oversearch').on( 'keyup', function () {
        $('.datatable').DataTable().search( this.value ).draw();
    });

<input id="oversearch" type="text">

Now I needed to highlight the table with result. Here is how to do so :

    $('#oversearch').on( 'keyup', function () {
        $('.table').DataTable().search( this.value ).draw();

        var row = $('.table').DataTable().$('tr', { "filter": "applied" });
        var parent_div = row.parents("div").eq(1);
        parent_div.addClass("highlight");
    });

you can then navigate into whatever parent you need with the parents() jquery. (here I'm choosing the 2nd div parent encountered = div.eq(1))

user_72621960
Related