使用ColumnReorder重排列后如何解决DataTables自定义列过滤失效问题

问题根因 #

代码中硬编码固定索引data[3]读取年龄列数据，开启ColumnReorder扩展后列的展示顺序会发生变化，固定索引指向的列不再是原来的年龄列，导致过滤逻辑读取到错误列的数据，过滤失效。

修复代码 #

无需改动HTML结构，仅修改JS逻辑即可，核心思路是通过列名绑定目标列，不再依赖固定索引取值，修改后完整代码如下：

$(document).ready(function() {
    var table = $('#example').DataTable({
        colReorder: true,
        // 给每列定义唯一name标识，不受列顺序调整影响
        columns: [
            { name: 'name' },
            { name: 'position' },
            { name: 'office' },
            { name: 'age' },
            { name: 'start_date' },
            { name: 'salary' }
        ]
    });
    
    // 自定义过滤逻辑移到ready内部，可直接访问table实例动态获取列索引
    $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
            var min = parseInt($('#min').val(), 10);
            var max = parseInt($('#max').val(), 10);
            // 动态获取当前年龄列的正确索引
            var ageColIndex = table.column('age:name').index();
            var age = parseFloat(data[ageColIndex]) || 0;
 
            if ((isNaN(min) && isNaN(max)) ||
                (isNaN(min) && age <= max) ||
                (min <= age && isNaN(max)) ||
                (min <= age && age <= max))
            {
                return true;
            }
            return false;
        }
    );
     
    $('#min, #max').keyup(function() {
        table.draw();
    });
});

补充说明 #

如果不想给列定义name属性，也可以直接通过原始列索引转置获取当前索引，把上面获取索引的代码替换为：

// 3是年龄列的原始初始索引，transpose方法会自动转换为当前展示顺序下的索引
var ageColIndex = table.colReorder.transpose(3);

两种方案都可以保证列重排后过滤逻辑依然正常生效。

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