Javascript DataTables列筛选器使用FixedHeader失败

我有一个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");

} );

$（文档）.ready（函数（）{
$（“#HCView tfoot tr”）.clone（）.appendTo（$（“#HCView thead”）.find（“th”）.each（函数（i）{
var title=$（'#HCView thead th'）.eq（$（this.index（））.text（）；
$（this.html（“”）；
} );
//数据表
变量表=$（'#HCView'）。数据表（{
分页：false，
订购：错，
X:错，
sScrollX:false，
} );
新的$.fn.dataTable.FixedHeader（表{
//选择权
} );
//筛选器事件处理程序
$（table.table（）.container（））.on（'keyup'，'thead input'，函数（）{
桌子
.column（$（this）.data（'index'））
.search（this.value）
.draw（）；
} );
$（“#HCView_info”）。附加到（“#tableControls”）；
} );

发生这种情况是因为固定标头元素位于API方法引用的元素之外

我会使用第页演示的方法

//设置-向每个标题单元格添加文本输入
$（'#示例thead th'）。每个（函数（）{
var title=$（this.text（）；
$（this.html（“”）；
} );
变量表=$（'#示例'）。数据表({
订购：错，
fixedHeader:true
});
//应用搜索
table.columns（）.every（函数（）{
var=这个；
$（'input'，this.header（））.on（'keyup change'，function（）{
如果（that.search（）！==this.value）{
那个
.search（this.value）
.draw（）；
}
} );
} );   

有关代码和演示，请参阅。

将我的“筛选器事件处理程序”代码替换为您提供的“应用搜索”代码，成功了！我现在可以使用过滤器，一旦我已经滚动到他们被修复的点。