jQuery DataTable多列筛选与复选框多选功能兼容问题排查

你的代码存在三个核心问题，导致两项功能无法正常运行：

• 语法结构错误：你将$(document).ready()直接嵌套到了DataTable的配置对象中，DataTable的配置必须是键值对组成的合法对象，不能直接插入函数作为配置项，这会直接触发语法报错。
• 重复初始化DataTable：代码中先后两次调用$('#example').DataTable()，重复初始化会导致插件内部状态冲突，引发功能失效。
• DOM就绪逻辑混乱：所有表格相关的初始化逻辑（包括footer搜索框创建、DataTable配置）都应该放在$(document).ready()中，确保DOM元素加载完成后再执行，你的代码逻辑顺序完全错误。

修正后的代码 #

$(document).ready(function() {
    // 给每个footer单元格添加搜索输入框
    $('#example tfoot th').each(function () {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });
 
    // 初始化DataTable，整合多选与多列筛选功能
    var table = $('#example').DataTable({
        initComplete: function () {
            // 绑定多列筛选的搜索事件
            this.api()
                .columns()
                .every(function () {
                    var that = this;
                    $('input', this.footer()).on('keyup change clear', function () {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();
                        }
                    });
                });
        },
        // 多选复选框配置
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        order: [[ 1, 'asc' ]]
    });
});

内容的提问来源于stack exchange，提问作者CRM Guy