DataTables列可见性与搜索框同步控制教程

// 克隆第一行表头，并将其添加到thead中作为第二行
$('#myTable thead tr').clone(true).appendTo( '#myTable thead' );

// 遍历第二行的每个th，为其添加搜索输入框
$('#myTable thead tr:eq(1) th').each( function (i) {
    // 假设此处有逻辑获取原始列标题用于placeholder
    // let title = $(this).text(); // 对于克隆的空行，此处可能为空
    $(this).html( '<input type="text" style="max-width: 70px;" placeholder="Search" />' );

    // 为输入框绑定keyup或change事件以触发DataTables的列搜索
    $( '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">
    <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>
        <!-- 表格数据 -->
    </tbody>
</table>

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

    // 为每个列的搜索输入框绑定事件
    $('#myTable thead th input').on('keyup change', function () {
        // 获取当前输入框所在的列索引
        var colIdx = $(this).closest('th').index();
        if (table.column(colIdx).search() !== this.value) {
            table
                .column(colIdx)
                .search(this.value)
                .draw();
        }
    });

    window.table = table; // 将table实例暴露给全局，如果需要
});

// DataTables初始化
var table = $('#myTable').DataTable({
    // ...
});

// 假设您的搜索输入框仍在第二行
// $('#myTable thead tr').clone(true).appendTo( '#myTable thead' );
// ... (初始化搜索框的代码) ...

// 示例：一个函数用于切换列的可见性，并同步搜索框
function toggleColumnVisibility(columnIndex, isVisible) {
    // 1. 切换DataTables列的可见性
    table.column(columnIndex).visible(isVisible);

    // 2. 同步隐藏/显示对应的搜索输入框
    var searchTh = $('#myTable thead tr:eq(1) th').eq(columnIndex);
    if (isVisible) {
        searchTh.show(); // 或者 .css('display', '')
    } else {
        searchTh.hide(); // 或者 .css('display', 'none')
    }
    // 确保在隐藏时清除搜索内容，避免隐藏后依然应用搜索条件
    searchTh.find('input').val('');
    table.column(columnIndex).search('').draw();
}

// 示例：如何调用
// 假设您有一个复选框，其data-column-index属性存储了列索引
// 当复选框状态改变时
$('input[type="checkbox"].column-toggle').on('change', function() {
    var colIdx = $(this).data('column-index');
    var isChecked = $(this).is(':checked');
    toggleColumnVisibility(colIdx, isChecked);
});

// 如果您使用的是DataTables的列可见性按钮，可以监听其事件
table.on('column-visibility.dt', function (e, settings, column, state) {
    // column 是被改变可见性的列的索引
    // state 是该列的新可见性状态 (true/false)
    var searchTh = $('#myTable thead tr:eq(1) th').eq(column);
    if (state) {
        searchTh.show();
    } else {
        searchTh.hide();
        searchTh.find('input').val(''); // 清除搜索内容
        table.column(column).search('').draw(); // 清除搜索条件
    }
});