使用数据表搜索多个表
好的，在我开始之前，jquery业余警报。
我正在使用数据表，并且似乎无法让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>回答 5
Stack Overflow用户
发布于 2013-12-11 04:19:22
如果我明白你在找什么，那你就快到了。我接受了您的代码，并对其做了一个小的调整，因此在所有表上一次搜索/筛选。
我在jsFiddle http://jsfiddle.net/bhSv9/上放了一个演示
可数据的搜索筛选器是分配给表的本地的。我所做的是添加另一个输入，并将全局搜索指向它。
HTML加法
<input type="text" id="Search_All">JavaScript变化
$("#Search_All").keyup(function () {
oTable1.fnFilterAll(this.value);
});希望能帮上忙。
Stack Overflow用户
发布于 2018-05-14 14:33:59
因为DataTables 1.10，API是可用的，最好的方法是使用API搜索函数
$("#SearchTables").keyup(function () {
$('table').DataTable().search(this.value).draw();
});Stack Overflow用户
发布于 2017-08-20 02:26:27
鲍勃给出的解决方案是可行的。我只想进一步简化它，您不必多次编写keyup()和$(document).ready()函数。这对我有用。
$(document).ready(function () {
.....
.....
var oTable0 = $("#table1").dataTable();
var oTable1 = $("#table2").dataTable();
$("#Search_All").keyup(function () {
oTable0.fnFilterAll(this.value);
oTable1.fnFilterAll(this.value);
});
});
https://stackoverflow.com/questions/20509032
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号