我有一个 DataTables 表,其中使用文本输入对单独的列进行过滤。过滤器工作得很好。但是,当与 FixedHeader 插件结合使用时,我遇到了问题。当我向下滚动并且标题固定时,过滤器不再起作用。您仍然可以看到它们并输入它们,它们什么也不做。不确定这是否有所不同,但我将过滤器附加到标题中,以便您可以在表格顶部看到它们。
我希望我只是遗漏了一些明显的东西。如果需要其他代码供引用,请告诉我。任何帮助将不胜感激。
数据表脚本
$(document).ready(function() {
$("#HCView tfoot tr").clone().appendTo($("#HCView thead")).find("th").each( function (i) {
var title = $('#HCView thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" class="HCViewSearch" data-index="'+i+'" />' );
} );
// DataTable
var table = $('#HCView').DataTable( {
paging: false,
ordering: false,
scrollX: false,
sScrollX: false,
} );
new $.fn.dataTable.FixedHeader( table, {
// options
} );
// Filter event handler
$( table.table().container() ).on( 'keyup', 'thead input', function () {
table
.column( $(this).data('index') )
.search( this.value )
.draw();
} );
$("#HCView_info").appendTo("#tableControls");
} );
最佳答案
发生这种情况是因为固定 header 元素位于 table().container()
引用的元素之外API方法。
我会使用在 Individual column searching (text inputs) 上展示的方法页面。
// Setup - add a text input to each header cell
$('#example thead th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var table = $('#example').DataTable({
ordering: false,
fixedHeader: true
});
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.header() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
参见 this example用于代码和演示。
关于javascript - DataTables 列过滤器因 FixedHeader 而失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46028484/