好吧，在我开始之前先提醒一下 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>
最佳答案
如果我明白你在寻找什么，那么你就快成功了。我获取了您的代码并对其进行了一些小调整，以便立即搜索/过滤所有表格。
我在jsFiddle上放了一个演示http://jsfiddle.net/bhSv9/
数据表的搜索过滤器是指定表的本地搜索过滤器。我所做的是添加另一个输入并将全局搜索指向它。
HTML 添加
<input type="text" id="Search_All">
JavaScript 的变化
$("#Search_All").keyup(function () {
oTable1.fnFilterAll(this.value);
});
希望有帮助。
关于jquery - 使用数据表搜索多个表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20509032/