jQuery DataTable列搜索框消失问题求助

使用jQuery DataTable的列搜索功能时，输入搜索内容后搜索框会消失，问题截图如下：

相关代码：

var table=$('#example').DataTable({
         // stateSave: true
          "ordering": false,
          "retrieve": true,
          "fixedHeader": true,
           "scrollX": true,
            // "fixedColumns": {
            //    left: 1
            //  },  

        
              scrollY: '600px',
            dom: 'lBfrtip',
            buttons: [
            {
                extend: 'excel',
                text: 'Export',
                title:'Aluminum Coil Production Tracking Entries',
                className: 'btn btn-primary',
                header: true,
                exportOptions: {
                    //columns: ':visible:not(.notexport)'
                    //columns: [':visible', 16,18,19 ]
                     columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
                }
            }],
           
           
         });
        
         // 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();
    //         }
    //     } );
    // } );
             $('#example thead th').each(function() {
                const title = $(this).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                $('input', this).on('keyup change', function() {
                    if (table.column($(this).parent().index()).search() !== this.value) {
                      table
                            .column($(this).parent().index())
                            .search(this.value)
                            .draw();
                    }
                });
            });

解决方案 #

问题根源是开启了fixedHeader: true后，直接修改原始表头HTML，而FixedHeader插件会克隆表头用于固定显示。调用.draw()重新渲染表格时，克隆的表头会覆盖原始表头，导致搜索框丢失。

方法1：用initComplete回调添加搜索框 #

把搜索框的创建逻辑放到表格初始化的initComplete回调中，确保表格（包括FixedHeader）完全初始化后再操作：

var table=$('#example').DataTable({
    // stateSave: true
    "ordering": false,
    "retrieve": true,
    "fixedHeader": true,
    "scrollX": true,
    // "fixedColumns": {
    //    left: 1
    // },  
    scrollY: '600px',
    dom: 'lBfrtip',
    buttons: [
        {
            extend: 'excel',
            text: 'Export',
            title:'Aluminum Coil Production Tracking Entries',
            className: 'btn btn-primary',
            header: true,
            exportOptions: {
                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
            }
        }
    ],
    initComplete: function() {
        this.api().columns().every(function() {
            var column = this;
            var title = column.header().textContent;
            $(column.header()).html('<input type="text" placeholder="Search ' + title + '" />');
            
            $('input', column.header()).on('keyup change', function() {
                if (column.search() !== this.value) {
                    column.search(this.value).draw();
                }
            });
        });
    }
});

方法2：监听FixedHeader更新事件 #

如果要保持现有代码结构，可监听FixedHeader的fixedHeader.adjust事件，在表头被克隆后重新创建搜索框：

var table=$('#example').DataTable({
    // 你的原有配置
    "ordering": false,
    "retrieve": true,
    "fixedHeader": true,
    "scrollX": true,
    scrollY: '600px',
    dom: 'lBfrtip',
    buttons: [
        {
            extend: 'excel',
            text: 'Export',
            title:'Aluminum Coil Production Tracking Entries',
            className: 'btn btn-primary',
            header: true,
            exportOptions: {
                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
            }
        }
    ]
});

// 初始化搜索框的函数
function initColumnSearch() {
    $('#example thead th').each(function() {
        const title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        $('input', this).on('keyup change', function() {
            if (table.column($(this).parent().index()).search() !== this.value) {
                table.column($(this).parent().index()).search(this.value).draw();
            }
        });
    });
}

// 初始调用
initColumnSearch();

// 监听FixedHeader调整事件，重新初始化搜索框
table.on('fixedHeader.adjust', function() {
    initColumnSearch();
});

核心说明 #

开启fixedHeader后，DataTable会生成表头克隆体用于固定显示。直接修改原始表头后调用.draw()，FixedHeader会重新克隆原始表头（此时原始表头可能已被重置），导致搜索框丢失。上述两种方法能确保搜索框被正确添加到所有表头实例中，避免消失问题。

内容的提问来源于stack exchange，提问作者REVATHI