解决DataTables列显示隐藏与搜索框同步问题

<table id="myTable" class="display">
    <thead>
        <tr>
            <th>列1 <input type="text" placeholder="搜索列1" /></th>
            <th>列2 <input type="text" placeholder="搜索列2" /></th>
            <!-- 更多列 -->
        </tr>
    </thead>
    <tbody>
        <!-- 表格数据 -->
    </tbody>
</table>

<script>
$(document).ready(function() {
    var table = $('#myTable').DataTable({
        // ... 其他DataTables配置 ...
        initComplete: function () {
            this.api().columns().every(function () {
                var that = this;
                // 查找当前列标题中的input元素
                $('input', this.header()).on('keyup change clear', function () {
                    if (that.search() !== this.value) {
                        that.search(this.value).draw();
                    }
                });
            });
        }
    });
});
</script>

$(document).ready(function() {
    // 初始化DataTables
    window.table = $('#myTable').DataTable({
        // ... 您的DataTables配置 ...
    });

    // 克隆表头行并添加搜索输入框
    // 这一步保持不变，确保搜索框在第二行
    $('#myTable thead tr').clone(true).appendTo('#myTable thead');

    $('#myTable thead tr:eq(1) th').each(function (i) {
        // 获取原始列标题文本作为placeholder，避免文本丢失
        let originalTitle = $('#myTable thead tr:eq(0) th').eq(i).text();
        $(this).html('<input type="text" style="max-width: 70px;" placeholder="Search ' + originalTitle + '" />');

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

    // 核心解决方案：监听列可见性变化事件
    window.table.on('column-visibility.dt', function (e, settings, columnIdx, state) {
        // columnIdx: 发生变化的列索引
        // state: true表示可见，false表示隐藏

        // 找到第二行中对应列索引的<th>元素
        let searchTh = $('#myTable thead tr:eq(1) th').eq(columnIdx);

        if (state) { // 列现在可见
            searchTh.show(); // 显示搜索框所在的<th>
        } else { // 列现在隐藏
            searchTh.hide(); // 隐藏搜索框所在的<th>
        }
    });

    // 确保在页面加载时，搜索框的初始可见性与列的初始可见性匹配
    // 这对于DataTables初始化时某些列可能已被隐藏的情况很重要
    window.table.columns().every(function (colIdx) {
        let isVisible = this.visible();
        let searchTh = $('#myTable thead tr:eq(1) th').eq(colIdx);
        if (isVisible) {
            searchTh.show();
        } else {
            searchTh.hide();
        }
    });
});