好的,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>
Bob*_*ate 11
如果我明白你在寻找什么,那么你几乎就在那里.我拿了你的代码并对它进行了一些小调整,以便一次搜索/过滤所有表格.
我在jsFiddle http://jsfiddle.net/bhSv9/上放了一个演示
数据表的搜索过滤器是分配的表的本地.我所做的是添加另一个输入并指向全局搜索.
HTML添加
<input type="text" id="Search_All">
JavaScript的变化
$("#Search_All").keyup(function () {
oTable1.fnFilterAll(this.value);
});
希望能帮助到你.
从 DataTables 1.10 开始，API 可用，首选方式是使用API 搜索功能：
$("#SearchTables").keyup(function () {
$('table').DataTable().search(this.value).draw();
});