Global searc of all datatables

by kaiHogan

HTML

<link rel="stylesheet" href="http://datatables.net/release-datatables/media/css/demo_page.css">
<link rel="stylesheet" href="http://datatables.net/release-datatables/media/css/demo_table.css">
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.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>
             ...

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 () {
               $('#table1').dataTable({
                   "bPaginate": false,

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

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

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

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

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