DataTables基于JavaScript数组实现列搜索功能教程

3. 实现每列搜索功能

DataTables提供了initComplete回调函数，允许我们在表格完全初始化后执行自定义操作。我们将利用此回调函数来为每列添加搜索输入框。

核心逻辑步骤：

1. 克隆表头行并添加过滤器类： $('#example thead tr').clone(true).addClass('filters').appendTo('#example thead'); 这行代码克隆了现有的表头行，并将其添加回中，同时为其添加filters类，以便后续定位。
2. 遍历每一列： 在initComplete回调中，通过api.columns().eq(0).each(function (colIdx) { ... }); 遍历表格的每一列。
3. 创建搜索输入框： 对于每一列，获取其表头单元格，并用一个带有占位符的替换其内容。占位符通常是该列的标题。
4. 绑定搜索事件： 为新创建的输入框绑定change和keyup事件。
   • change事件用于执行实际的列搜索。它获取输入框的值，并使用api.column(colIdx).search(...)方法对当前列进行过滤。
   • keyup事件用于在用户输入时即时触发change事件，实现实时搜索效果，并通过e.stopPropagation()阻止事件冒泡，避免干扰DataTables的其他事件。

完整JavaScript代码示例：

$(document).ready(function() {
    const dataSet = [
        ['a', 'b', 'x'],
        ['c', 'd', 'y'],
        ['e', 'f', 'z']
    ];
    const headers = [
        { 'title': 'A' },
        { 'title': 'B' },
        { 'title': 'C' }
    ];

    // 1. 动态生成，如果HTML中没有定义
    var th = '';
    headers.forEach(header => th = th + '' + header.title + '');
    th = th + '';
    $(th).appendTo('#example');

    // 2. 克隆表头行并添加过滤器行
    $('#example thead tr')
        .clone(true)
        .addClass('filters')
        .appendTo('#example thead');

    var table = $('#example').DataTable({
        // 3. 配置DataTables数据源和列定义
        data: dataSet,
        columns: headers,

        // 4. 其他DataTables选项
        orderCellsTop: true, // 确保排序图标在顶部表头
        fixedHeader: true,   // 固定表头，如果需要

        // 5. initComplete回调，实现列搜索逻辑
        initComplete: function() {
            var api = this.api();

            // 遍历每一列
            api.columns().eq(0).each(function(colIdx) {
                // 获取过滤器行中的对应单元格
                var cell = $('.filters th').eq($(api.column(colIdx).header()).index());
                var title = $(cell).text(); // 获取原始列标题作为placeholder

                // 在单元格中插入搜索输入框
                $(cell).html('');

                // 为输入框绑定change和keyup事件
                $('input', $('.filters th').eq($(api.column(colIdx).header()).index()))
                    .off('keyup change') // 先解绑，防止重复绑定
                    .on('change', function(e) {
                        $(this).attr('title', $(this).val()); // 将当前值设置为title属性
                        var regexr = '({search})'; // 用于构建正则表达式

                        // 执行列搜索
                        api.column(colIdx).search(
                            this.value != '' ?
                            regexr.replace('{search}', '(((' + this.value + ')))') :
                            '',
                            this.value != '',
                            this.value == ''
                        ).draw(); // 重新绘制表格以显示过滤结果
                    })
                    .on('keyup', function(e) {
                        e.stopPropagation(); // 阻止事件冒泡

                        $(this).trigger('change'); // 触发change事件进行搜索
                    });
            });
        },
    });
});

4. HTML结构与必要的库引入

为了使上述JavaScript代码正常工作，你的HTML页面需要包含一个

元素，并引入jQuery和DataTables的JS/CSS库。

HTML结构：