0
我有几个表，我已经创建了使用Jade和bootstrap和jQuery DataTables。我已经包含了一些代码来使单个列过滤成为可能;但是，它只能在第一个表上完全工作，即使它们都是由该功能所应用的相同ID标识的。代码如下：让一个脚本运行多个数据表
script.
$(document).ready(function() {
$('.datatable tfoot th').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' +title+'" />');
});
var table = $('.datatable').DataTable();
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
按照可在数据表API中发现的例如：https://datatables.net/examples/api/multi_filter.html
我的表都与该ID标识的.datatable，他们已经根据头&页脚那与代码一起工作。两个表都将文本框显示为函数的结果，但只有第一个实际执行过滤。任何意见，我可以如何使用这个函数成功的多个表将不胜感激，谢谢！
我完整的代码如下：
extends layout
block content
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
meta(name='viewport', content='width=device-width, initial-scale=1')
link(href='css/bootstrap.min.css', rel='stylesheet')
link(rel='stylesheet', href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js')
script(src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')
title Bootstrap Example
body
script(src='http://code.jquery.com/jquery.js')
script(src='js/bootstrap.min.js')
.container
.jumbotron
.mark
h2 Bootstrap/Datatables Test Page
.megasearch
h3 Search All Tables
input#Search_All
br
br
// TABLE ONE
table.datatable.table.table-hover.table-striped.table-bordered
thead
tr
th #
th Name
th Type
th Battery
tfoot
tr
th #
th Name
th Spice
th Approval
tbody
tr
th(scope='row') 1
td BOSS RC-1
td Loop
td Yes
tr
th(scope='row') 2
td Line 6 DL4
td Delay
td Yes
tr
th(scope='row') 3
td Polara
td Reverb
td Yes
br
br
// TABLE TWO
table.datatable.table.table-hover.table-striped.table-bordered
thead
tr
th #
th Name
th Spice
th Approval
tfoot
tr
th #
th Name
th Spice
th Approval
tbody
tr
th(scope='row') 1
td Pickle
td No
td Yes
tr
th(scope='row') 2
td Jalapeno
td Yes
td Yes
tr
th(scope='row') 3
td Pickled Onions
td No
td Yes
tr
th(scope='row') 3
td Pickled Onions
td No
td Yes
tr
th(scope='row') 3
td Pickled Onions
td No
td Yes
tr
th(scope='row') 3
td Pickled Onions
td No
td Yes
tr
th(scope='row') 3
td Pickled Onions
td No
td Yes
tr
th(scope='row') 3
td Pickled Onions
td No
td Yes
tr
th(scope='row') 3
td Pickled Onions
td No
td Yes
tr
th(scope='row') 3
td Pickled Onions
td No
td Yes
tr
th(scope='row') 3
td Pickled Onions
td No
td Yes
// SCRIPTS REQUIRED FOR DATATABLES AND FUNCTION FOR SEARCH_ALL
script(src='https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css')
script(src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js')
script(src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js')
script.
$(document).ready(function() {
$('.datatable').DataTable({
"pagingType": "full_numbers"
});
// THIS IS THE GLOBAL SEARCH CODE
$.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);
}
};
var table = $(".datatable").dataTable();
$("#Search_All").keyup(function() {
// Filter on the column (the index) of this element
table.fnFilterAll(this.value);
});
});
script.
$(document).ready(function() {
$('.datatable tfoot th').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' +title+'" />');
});
var table = $('.datatable').DataTable();
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
1）'.datatable
然后用ID作为参数包装你的代码的函数'不是一个ID;这是一堂课。 2）如果您使用DataTables的类名进行选择，则使用的正确类将是“.dataTable”（大写字母“T”）。如果不能看到你的表格结构，很难说出问题的原因。 –
我只是将我的完整代码添加到帖子中。 –