Datatable列排序时如何固定顶部Average_SLA行位置不变

你引入的absolute.js自定义排序规则仅绑定在第一列（Process列）上，当点击其他列触发排序时，DataTable会调用对应列的排序逻辑重排全部行，由于没有给Average_SLA汇总行设置全局最高优先级的固定规则，该行自然会被其他行挤走，无法保持在顶部。

直接用DataTable原生的orderFixed属性即可，这个属性定义的排序规则优先级永远高于用户手动触发的列排序，不管点击任意列排序，匹配的行都会固定在指定位置，不需要额外做复杂的DOM操作。

修正后的初始化代码 #

把你原来的DataTable初始化逻辑替换成下面的代码即可，原有CSS、HTML结构不需要改动：

$( document ).ready(function() {
    // 保留第一列的绝对排序配置，点击第一列排序时也保持汇总行置顶
    var namesType = $.fn.dataTable.absoluteOrder( [
        { value: "Average_SLA", position: "top" }
    ] );

    var table = $("#tableSla").DataTable({
        pageLength: 25,
        fixedHeader: false,
        aaSorting: [],
        // 核心固定排序配置：全局生效，优先级高于所有手动排序
        orderFixed: {
            pre: function (rows) {
                // 匹配Average_SLA行，永远给最高排序优先级
                return rows.map(row => row[0] === "Average_SLA" ? 0 : 1);
            }
        },
        columnDefs: [
            { type: namesType, targets: 0 },
            { "width": "20%", "targets": 0 },
            // 统一处理其他列的排序值，兼容百分比、No Sla这类特殊文本
            {
                targets: "_all",
                render: function (data, type) {
                    if (type === "sort") {
                        if (data === "No Sla") return -99999;
                        if (data.includes("%")) return parseFloat(data.replace("%", ""));
                    }
                    return data;
                }
            }
        ],
        createdRow: function (row, data, index) {
            if (data[0] == "Average_SLA") {
                $(row).addClass("average-css");
            }
        }
    });
});

关键说明 #

• 你之前把orderFixed配置注释掉了，这是实现全局固定行的核心，不要用写死列排序方向的写法，用自定义匹配函数的方式更稳定，不会受第一列其他值排序的影响
• 新增的列render逻辑专门处理了非第一列的排序值转换，解决百分比字符串、"No Sla"文本导致的排序异常问题
• 配置完成后，不管点击哪一列做升序/降序排序，Average_SLA行都会永远固定在表格第一行的位置

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