Tabulator表格多列数字排序按钮功能异常问题排查

问题场景 #

实现Tabulator表格的三级数字排序时，配置的initialSort初始排序和按钮触发的setSort排序均不生效，但通过Shift+点击表头按unterposition→position→titel反向顺序排序可正常工作。需求是按titel→position→unterposition的层级升序排序。

表格初始化代码 #

var kalkulationTable = new Tabulator("#KalkulationTable", {
        height: 600,
        ajaxURL: "{% url 'getAngebotskalkulation' pk=object.id%}",
        ajaxConfig: "GET",
        ajaxResponse: function (url, params, response) {
            // Extract only the kalkulation object:
            var kalkulation = response.kalkulation;
            // Return the extracted object for Tabulator
            return kalkulation;
        },
        movableRows: true,
        movableRowsReceiver: "add",
        initialSort: [
            { column: 'titel', dir: 'asc' },
            { column: 'position', dir: 'asc' },
            { column: 'unterposition', dir: 'asc' },
        ],
        placeholder: "Noch keine Kalkulation vorhanden.",
        layout: "fitColumns",
        columns: [
            { title: "T", field: "titel", sorter: "number", frozen: true, maxWidth: 70, editor: "input", },
            { title: "P", field: "position", sorter: "number", frozen: true, maxWidth: 60, editor: "input", },
            { title: "U", field: "unterposition", sorter: "number", frozen: true, maxWidth: 60, editor: "input", },
            { title: "Titeltext", field: "titeltext", sorter: "string", resizable: true, editor: "input", },
            // more columns, which should not matter ...
        ]
    });

排序按钮代码 #

document.getElementById("sortieren").addEventListener("click", function () {
        kalkulationTable.setSort([
            { column : "titel", dir : "asc" },
            { column : "position", dir : "asc" },
            { column : "unterposition", dir : "asc" },
        ]);
    });

期望排序效果 #

当前异常表现 #

• 页面加载后，initialSort配置未生效，表格未按预期顺序排列
• 点击排序按钮调用setSort后，表格排序无变化
• Shift+点击表头按反向层级排序可正常生效

问题原因及解决方案 #

核心问题是数据类型与排序器不匹配：
你给三个列配置了sorter: "number"数字排序器，但后端返回的titel、position、unterposition字段值是带前导零的字符串（如"00"、"01"），而非数值类型。Tabulator的数字排序器会严格按数值逻辑处理，但字符串格式的数值在多级排序时无法正确触发预期的排序逻辑；而Shift+点击表头能生效，是因为表头点击时Tabulator会自动适配单元格的实际值类型进行排序。

解决方法 #

方案1：后端调整数据类型

将titel、position、unterposition字段以纯数值类型返回（如0、1、2），前端保持现有sorter: "number"配置即可。

方案2：前端自定义排序器

若无法修改后端，给三个列配置自定义排序器，将字符串转为数字后再比较：

{ 
    title: "T", 
    field: "titel", 
    sorter: function(a, b) {
        return parseInt(a, 10) - parseInt(b, 10);
    }, 
    frozen: true, 
    maxWidth: 70, 
    editor: "input" 
},
// position和unterposition列复制上述sorter配置

额外检查：确认ajaxResponse返回的kalkulation数组中，每个对象的三个排名字段没有嵌套、空值等异常格式。

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