Global searc of all datatables

by Mohamed Sami El-Tahawy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.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>

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;
            }

JavaScript

$.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);
             });
           });