DataTables列动态显示/隐藏时搜索框同步管理教程

// 假设HTML结构如下：
// <table id="myTable" class="display">
//     <thead>
//         <tr>
//             <th>Name</th>
//             <th>Position</th>
//             <th>Office</th>
//             <th>Age</th>
//             <th>Start date</th>
//             <th>Salary</th>
//         </tr>
//     </thead>
//     <tbody>
//         <!-- 数据行 -->
//         <tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25</td><td>$320,800</td></tr>
//         <tr><td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>63</td><td>2011/07/25</td><td>$170,750</td></tr>
//         <!-- 更多数据... -->
//     </tbody>
// </table>

// 假设有用于控制列可见性的复选框：
// <div id="columnVisibilityControls">
//     <label><input type="checkbox" class="column-toggle" data-column-index="0" checked> Name</label>
//     <label><input type="checkbox" class="column-toggle" data-column-index="1" checked> Position</label>
//     <label><input type="checkbox" class="column-toggle" data-column-index="2" checked> Office</label>
//     <label><input type="checkbox" class="column-toggle" data-column-index="3" checked> Age</label>
//     <label><input type="checkbox" class="column-toggle" data-column-index="4" checked> Start date</label>
//     <label><input type="checkbox" class="column-toggle" data-column-index="5" checked> Salary</label>
// </div>


$(document).ready(function() {
    // 1. DataTables 初始化
    window.table = $('#myTable').DataTable({
        // 其他DataTables配置，例如：
        // "paging": true,
        // "ordering": true,
        // "info": true,
        orderCellsTop: true, // 确保表头可以有多个TR，并支持列排序
        fixedHeader: true    // 如果使用固定表头，可能需要此项
    });

    // 2. 克隆表头行并添加搜索输入框
    // 注意：这里我们只克隆一次，并在克隆的行中添加输入框
    // 避免重复克隆导致DOM结构混乱，确保搜索框位于第二个<thead><tr>中
    const $searchRow = $('#myTable thead tr:eq(0)').clone(true); // 克隆第一个表头行
    $searchRow.appendTo('#myTable thead'); // 将克隆行添加到<thead>末尾

    // 遍历新克隆的搜索行中的每个th，添加输入框
    $searchRow.find('th').each(function(i) {
        // 可以从原始表头获取标题，或者直接使用通用占位符
        // const title = window.table.column(i).header().textContent;
        $(this).html('<input type="text" style="max-width: 70px;" placeholder="搜索" />');

        // 为每个搜索输入框绑定keyup/change事件
        $('input', this).on('keyup change', function() {
            if (window.table.column(i).search() !== this.value) {
                window.table
                    .column(i)
                    .search(this.value)
                    .draw(); // 执行列搜索并重绘表格
            }
        });
    });

    // 3. 实现列显示/隐藏的同步函数
    // 假设有一个外部机制（例如复选框）来触发列的显示/隐藏
    function toggleColumnAndSearchInput(columnIndex, isVisible) {
        // 步骤1: 改变DataTables列的可见性
        window.table.column(columnIndex).visible(isVisible);

        // 步骤2: 找到包含搜索框的对应<th>并同步其可见性
        // 由于搜索框在第二个<thead><tr>中 (tr:eq(1))，我们定位到该行
        const $searchTh = $('#myTable thead tr:eq(1) th').eq(columnIndex);

        if (isVisible) {
            $searchTh.show(); // 显示对应的搜索框<th>
        } else {
            $searchTh.hide(); // 隐藏对应的搜索框<th>
        }
    }

    // 4. 绑定列可见性控制器的事件
    // 假设你有如上HTML中所示的带有class="column-toggle"的复选框
    $('.column-toggle').on('change', function() {
        const columnIndex = $(this).data('column-index'); // 从data属性获取列索引
        const isChecked = this.checked; // 获取复选框的选中状态
        toggleColumnAndSearchInput(columnIndex, isChecked);
    });

    // 5. 初始状态同步（如果某些列默认是隐藏的）
    // 确保页面加载时，如果复选框默认未选中，则对应搜索框也隐藏
    $('.column-toggle').each(function() {
        const columnIndex = $(this).data('column-index');
        const isChecked = this.checked;
        if (!isChecked) {
            // DataTables的visible()会在初始化时处理列的隐藏
            // 这里只需要处理搜索框的初始隐藏
            $('#myTable thead tr:eq(1) th').eq(columnIndex).hide();
        }
    });

});