Datatable自定义列排序异常：按指定元素循环切换排序规则失效

核心问题根源 #

当自定义排序插件的percent-pre返回数组时，DataTables默认会将数组转为字符串进行比较（比如[10, 30]变成"10,30"），导致排序逻辑失效。同时你的percent-asc/desc函数没有根据sort_state循环规则，从数组中提取对应字段的值进行比较，而是沿用了单一值的逻辑。

关键排查点 #

1. 确认自定义排序类型绑定：目标列是否正确设置orderDataType: 'percent'，确保插件被触发而非默认的HTML文本排序。
2. 检查percent-pre返回值：确保返回的数组是合法数值（无NaN），比如给解析失败的情况加默认值：

   $.fn.dataTable.ext.order['percent-pre'] = function(settings, col) {
       return this.api().column(col, {order:'index'}).nodes().map(function(td) {
           const sortValue = parseFloat($(td).find('.sort-value').text()) || 0;
           const sortPercent = parseFloat($(td).find('.sort-percent').text()) || 0;
           return [sortValue, sortPercent];
       });
   };
   

3. sort_state的传递与读取：确保sort_state存储在DataTable实例的settings中（而非全局变量），让排序插件能正确获取当前列的循环状态。

修复后的完整代码实现 #

1. 初始化DataTable时绑定状态与排序类型

const table = $('#your-table-id').DataTable({
    columns: [
        {
            data: null,
            render: function(data) {
                return `<span class="sort-value">${data.value}</span>
                        <span class="sort-percent">${data.percent}%</span>`;
            },
            orderDataType: 'percent', // 指定自定义排序类型
            orderable: true
        }
        // 其他列配置...
    ],
    initComplete: function(settings) {
        // 初始化各列的排序状态（循环值：0-3）
        settings.columnSortStates = settings.columnSortStates || {};
        settings.columnSortStates[0] = 0; // 0: value升,1:value降,2:percent升,3:percent降
    }
});

2. 更新表头点击事件的状态管理

$('#your-table-id thead th').on('click', function() {
    const colIdx = table.column(this).index();
    const settings = table.settings()[0];
    // 循环更新状态（0→1→2→3→0）
    settings.columnSortStates[colIdx] = (settings.columnSortStates[colIdx] + 1) % 4;
    // 触发排序（方向参数不影响，实际逻辑由插件控制）
    table.order([colIdx, 'asc']).draw();
});

3. 修正自定义排序插件的比较逻辑

// 状态映射表，对应循环规则
const sortStateMap = [
    {field: 'value', dir: 'asc'},
    {field: 'value', dir: 'desc'},
    {field: 'percent', dir: 'asc'},
    {field: 'percent', dir: 'desc'}
];

$.fn.dataTable.ext.order['percent-pre'] = function(settings, col) {
    return this.api().column(col, {order:'index'}).nodes().map(function(td) {
        const sortValue = parseFloat($(td).find('.sort-value').text()) || 0;
        const sortPercent = parseFloat($(td).find('.sort-percent').text()) || 0;
        return [sortValue, sortPercent];
    });
};

$.fn.dataTable.ext.order['percent-asc'] = function(a, b, settings, col) {
    const currentState = sortStateMap[settings.columnSortStates[col]];
    // 根据当前状态选择数组中的对应元素
    const valA = currentState.field === 'value' ? a[0] : a[1];
    const valB = currentState.field === 'value' ? b[0] : b[1];
    // 根据状态返回比较结果
    return currentState.dir === 'asc' ? valA - valB : valB - valA;
};

// 复用asc逻辑，因为状态已包含方向信息
$.fn.dataTable.ext.order['percent-desc'] = $.fn.dataTable.ext.order['percent-asc'];

验证要点 #

• 点击表头时，查看settings.columnSortStates[colIdx]是否按0→1→2→3循环更新。
• 检查排序后的结果是否符合：首次按sort-value升序，二次降序，三次按sort-percent升序，四次降序的循环规则。

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