[英]DataTables Column Filter Fails With FixedHeader
我有一個使用文本輸入進行單獨列過濾的DataTables表。 篩選器效果很好。 但是,當與FixedHeader插件結合使用時,我遇到了問題。 當我向下滾動並且標題變得固定時,過濾器不再起作用。 您仍然可以看到它們並輸入它們,它們什么也不做。 不知道它是否有所不同,但我將過濾器附加到標題之后,以便您可以在表頂部看到它們。
我希望我只是在這里缺少明顯的東西。 如果需要其他代碼作為參考,請告訴我。 任何幫助將不勝感激。
DataTables腳本
$(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");
} );
發生這種情況是因為固定標頭元素位於table().container()
API方法引用的元素之外。
我將使用在“ 單個列搜索”(文本輸入)頁面上演示的方法。
// 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();
}
} );
} );
有關代碼和演示,請參見此示例 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.