使用数据表搜索多个表 [英] Search multiple tables using Datatables
问题描述
好吧，jQuery业余警报在我开始之前.
Ok, jquery amateur alert before I get started.
我正在使用数据表，似乎无法获取
I'm using Datatables and cannot seem to get the fnFilterAll API to function, even with the example given on their site. I've exhausted an online google operation over a period of several hours last night and to my frustration I couldn't find an actual working example of the fnFilterAll.
fnFilterAll API允许搜索多个表(对于那些想知道的人).
fnFilterAll API is to allow searching of multiple tables (for those wondering).
为使事情变得简单，我创建了一个包含两个表的拆分页面.我想我虽然缺少一些非常基本的东西，例如也许我必须指定列，但是不确定在哪里(在this.value区域中).无论如何，这是我的代码作为起点:
To keep things simple at the moment, I created a split page with two tables. I think I'm missing something very elementary though, like perhaps I have to specify columns, but not sure where to do so (in this.value area?). At any rate, here's my code as a starting point:
任何帮助，我们深表感谢.谢谢您的时间.
Any assistance greatly appreciated. Thank you for your time.
<!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>
推荐答案
如果我了解您要查找的内容，那么您就差不多了.我接受了您的代码并对其进行了一些细微调整，以便立即搜索/过滤所有表.
If I understand what it is you are looking for then you are almost there. I took your code and made a small tweak to it so search / filter on all the tables at once.
我在jsFiddle上进行了演示 http://jsfiddle.net/bhSv9/
I put a demo on jsFiddle http://jsfiddle.net/bhSv9/
数据表的搜索过滤器位于分配的表的本地.我要做的是添加另一个输入，并指向全局搜索.
The search filters for datatables are local to the table assigned. What I did was add another input and pointed the global search to it instead.
HTML添加
<input type="text" id="Search_All">
JavaScript更改
The JavaScript change
$("#Search_All").keyup(function () {
oTable1.fnFilterAll(this.value);
});
希望有帮助.
这篇关于使用数据表搜索多个表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
