Global searc of all datatables
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>
<div>
<table id="example1" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>$90,560</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>$198,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>$132,000</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>$114,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>$145,000</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office...
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
$(document).ready(function() {
var oTable1 = $('#example1').dataTable();
var oTable2 = $('#example2').dataTable();
var oTable3 = $('#example3').dataTable();
var oTable4 = $('#example4').dataTable();
$('table.display tfoot th').each(
function() {
var title = $(this).text();
$(this)
.html(
'<input type="text" placeholder="Search '+title+'" />');
});
$("#example1 tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable1.fnFilter( this.value, $("tfoot input").index(this) );
} );
$("#example2 tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable2.fnFilter( this.value, $("tfoot input").index(this) );
} );
$("#example3 tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable3.fnFilter( this.value, $("tfoot input").index(this) );
} );
$("#example4 tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable4.fnFilter( this.value, $("tfoot input").index(this) );
} );
} );