DataTables列隐藏与搜索框同步显示/隐藏：结构与实现

// 克隆原始表头行并添加到<thead>中，创建第二个表头行
$('#myTable thead tr').clone(true).appendTo( '#myTable thead' );

// 遍历第二个表头行的<th>，并插入搜索输入框
$('#myTable thead tr:eq(1) th').each( function (i) {
    let title = $(this).text(); // 注意：克隆的<th>可能没有文本内容
    $(this).html( '<input type="text" style="max-width: 70px;" placeholder="Search" />' );

    // 绑定搜索事件
    $( 'input', this ).on( 'keyup change', function () {
        if (window.table.column(i).search() !== this.value ) {
            window.table
                .column(i)
                .search( this.value )
                .draw();
        }
    } );
} );

<table id="myTable" class="display">
    <thead>
        <tr>
            <th>
                列1标题
                <input type="text" placeholder="搜索列1" style="max-width: 70px;">
            </th>
            <th>
                列2标题
                <input type="text" placeholder="搜索列2" style="max-width: 70px;">
            </th>
            <!-- 更多列... -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据1-1</td>
            <td>数据1-2</td>
        </tr>
        <!-- 更多数据行... -->
    </tbody>
</table>

$(document).ready(function() {
    window.table = $('#myTable').DataTable({
        // ... 其他DataTables配置
    });

    // 绑定搜索事件
    $('#myTable thead th input').on('keyup change', function () {
        const columnIndex = $(this).closest('th').index();
        if (window.table.column(columnIndex).search() !== this.value) {
            window.table
                .column(columnIndex)
                .search(this.value)
                .draw();
        }
    });
});

$(document).ready(function() {
    window.table = $('#myTable').DataTable({
        // ... 其他DataTables配置，例如：
        // orderCellsTop: true, // 如果需要将排序图标也置于顶部
        // fixedHeader: true // 如果需要固定表头
    });

    // 1. 克隆原始表头行并添加到<thead>中，创建第二个表头行
    // 注意：这里的clone(true)会克隆事件处理器，但我们会在下一步重新绑定搜索事件
    const searchRow = $('#myTable thead tr:eq(0)').clone(true).appendTo('#myTable thead');

    // 2. 清空克隆行的内容，并为每个<th>插入搜索输入框
    searchRow.find('th').each(function (i) {
        $(this).html('<input type="text" style="max-width: 70px;" placeholder="Search" />');

        // 绑定搜索事件
        $('input', this).on('keyup change', function () {
            if (window.table.column(i).search() !== this.value) {
                window.table
                    .column(i)
                    .search(this.value)
                    .draw();
            }
        });
    });

    // 3. 实现一个函数来控制列的显示/隐藏，并同步操作搜索行
    /**
     * 控制DataTables列的可见性，并同步更新搜索行中对应列的可见性。
     * @param {number} columnIndex 要操作的列索引。
     * @param {boolean} isVisible true为显示，false为隐藏。
     */
    function toggleColumnVisibility(columnIndex, isVisible) {
        // 使用DataTables API控制数据列的可见性
        window.table.column(columnIndex).visible(isVisible);

        // 获取搜索行的所有<th>，并找到对应索引的<th>，然后设置其可见性
        // 注意：eq(1)表示第二个<tr>，即搜索行
        $('#myTable thead tr:eq(1) th').eq(columnIndex).toggle(isVisible);
    }

    // 示例：假设你有一个按钮或复选框来触发列的显示/隐藏
    // 例如，控制第0列的可见性：
    // $('#toggleCol0Button').on('click', function() {
    //     const currentVisibility = window.table.column(0).visible();
    //     toggleColumnVisibility(0, !currentVisibility);
    // });
    // 或者，通过DataTables的Buttons扩展或其他自定义UI来触发
});