DataTables列过滤器的FixedHeader失败

Question

我有一个使用文本输入进行单独列过滤的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");

} );

Answer 1

发生这种情况是因为固定标头元素位于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();
        }
    } );
} );   

有关代码和演示，请参见此示例 。