使用数据表搜索多个表
好的，在我开始之前，jquery业余警报。
我正在使用Datatables并且似乎无法使fnFilterAll API正常运行，即使他们的网站上给出了示例。 我昨晚在几个小时的时间内完成了一次在线谷歌操作，令我沮丧的是，我找不到fnFilterAll的实际工作示例。
fnFilterAll API允许搜索多个表（对于那些想知道的人）。
为了使事情变得简单，我创建了一个包含两个表的拆分页面。 我想我错过了一些非常基本的东西，比如也许我必须指定列，但不知道在哪里这样做（在this.value区域？）。 无论如何，这是我的代码作为起点：
非常感谢任何帮助。 感谢您的时间。
Testing Multi-Table Search Filter @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; } $.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); }); }); Current:
| Fname | Lname | Age | Check |
| John | Smith | 44 | -- |
| Mary | Doe | 54 | -- |
Last:
| Fname | Lname | Age | Check |
| John | Smith | 44 | -- |
| Mary | Doe | 54 | -- |
如果我明白你在寻找什么，那么你几乎就在那里。 我拿了你的代码并对它进行了一些小调整，以便一次搜索/过滤所有表格。
我在jsFiddle http://jsfiddle.net/bhSv9/上放了一个演示
数据表的搜索filter是分配的表的本地。 我所做的是添加另一个输入并指向全局搜索。
HTML添加
JavaScript的变化
$("#Search_All").keyup(function () { oTable1.fnFilterAll(this.value); });
希望能帮助到你。
鲍勃提出的解决方案。 我只是想简化它，你不必多次编写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); }); });
从DataTables 1.10开始，API可用且优先使用API搜索function ：
$("#SearchTables").keyup(function () { $('table').DataTable().search(this.value).draw(); });
我基于@bob工作制作了另一个版本但是，我清理了整洁的代码并且只有一个搜索框并且使用更高版本的dataTables。
小提琴来源
$.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() { $('.display').dataTable({ "bPaginate": false, "sDom": "<'dt-toolbar'<'col-sm-6 col-xs-12 hidden-xs'l>r>" + "t" + "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>", }); var oTable0 = $("#table1").dataTable(); var oTable1 = $("#table2").dataTable(); $("#Search_All").keyup(function() { oTable0.fnFilterAll(this.value); oTable1.fnFilterAll(this.value); }); });
#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; }
Testing Multi-Table Search Filter2Search All Tables
Current:
| Fname | Lname | Age | Check |
| John | Smith | 44 | -- |
| Mary | Doe | 54 | -- |
Last:
| Fname | Lname | Age | Check |
| John | Smith | 44 | -- |
| Mary | Doe | 54 | -- |