【发布时间】：2016-07-07 18:14:45
【问题描述】：
我有几个表是我使用 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();
}
} );
} );
} );
根据可以在 DataTables 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；这是一堂课。 2) 如果您使用 DataTables 的类名进行选择，则要使用的正确类是.dataTable（大写为T）。如果无法查看您的表结构，就很难判断可能是什么问题。 -
我刚刚将我的完整代码添加到帖子中。
标签： jquery html twitter-bootstrap datatables pug