在我开始之前，我想提醒一下，我是一个jquery的初学者。
我正在使用Datatables，但无法使用fnFilterAll API，即使按照他们网站上给出的示例进行操作。昨晚我花了几个小时在谷歌上搜索，但很遗憾，我找不到一个真正可行的fnFilterAll示例。
fnFilterAll API允许搜索多个表格（对于那些感到困惑的人来说）。
为了简化问题，我创建了一个拆分页面，其中包含两个表格。但我认为我可能缺少一些非常基础的东西，比如可能需要指定列，但不确定在哪里指定（在this.value区域吗？）。无论如何，这是我的代码起点：
非常感谢您的帮助。感谢您抽出宝贵时间。
<!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"> </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>