DataTables 列过滤器因 FixedHeader 失败

Posted 2023-05-07

【中文标题】DataTables 列过滤器因 FixedHeader 失败

【英文标题】：DataTables Column Filter Fails With FixedHeader

【发布时间】：2018-02-12 04:27:56

【问题描述】：

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

 );

【参考方案1】：

这是因为固定标头元素位于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。

【讨论】：

将我的“过滤事件处理程序”代码换成您提供的“应用搜索”代码就可以了！滚动到固定位置后，我现在可以使用过滤器了。