表格数字列排序异常求助：按字符串排序而非数值排序

问题场景 #

现有如下表格：

点击Column1或Column2时排序正常，但点击Column3时，若列内包含1、11、14、2、3这类数据，会按字符串规则排序，出现1、11、14、2、3的错误顺序。所有数据从数据库取出均为string类型，尝试将Column3转为int类型未解决问题，原JS代码如下：

$(document).ready(() => {
    $('th').each(function (columna) {
        $(this).click(function () {
            let registros = $('table').find('tbody > tr').get();

            registros.sort(function (a, b) {
                let valor1 = $(a).children('td').eq(columna).text().toUpperCase();
                let valor2 = $(b).children('td').eq(columna).text().toUpperCase();

                return valor1 < valor2 ? -1 : valor1 > valor2 ? 1 : 0
            });

            $.each(registros, function (indice, elemento) {
                $('tbody').append(elemento);
            });
        });
    });
});

问题原因 #

原代码中所有列的排序逻辑均基于字符串比较，即使Column3的数字被转成int，排序时仍会从DOM中读取文本并转为字符串，导致数字按字典序排序而非数值序。

解决方案 #

方案1：自动识别数字列通用排序 #

修改排序逻辑，自动判断单元格内容是否为数字，是则按数值比较，否则按字符串比较：

$(document).ready(() => {
    $('th').each(function (columna) {
        $(this).click(function () {
            let registros = $('table').find('tbody > tr').get();

            registros.sort(function (a, b) {
                // 去除文本前后空格，避免干扰判断
                let valor1 = $(a).children('td').eq(columna).text().trim();
                let valor2 = $(b).children('td').eq(columna).text().trim();

                // 判断是否为有效数字
                const isNumber1 = !isNaN(valor1) && !isNaN(parseFloat(valor1));
                const isNumber2 = !isNaN(valor2) && !isNaN(parseFloat(valor2));

                if (isNumber1 && isNumber2) {
                    // 数字列按数值差排序
                    return parseFloat(valor1) - parseFloat(valor2);
                } else {
                    // 非数字列保持原字符串比较逻辑
                    valor1 = valor1.toUpperCase();
                    valor2 = valor2.toUpperCase();
                    return valor1 < valor2 ? -1 : valor1 > valor2 ? 1 : 0;
                }
            });

            $.each(registros, function (indice, elemento) {
                $('tbody').append(elemento);
            });
        });
    });
});

方案2：指定列强制数值排序 #

如果确定只有Column3（索引为2，从0开始计数）是数字列，可直接针对该列做数值转换，逻辑更高效：

$(document).ready(() => {
    $('th').each(function (columna) {
        $(this).click(function () {
            let registros = $('table').find('tbody > tr').get();

            registros.sort(function (a, b) {
                let valor1 = $(a).children('td').eq(columna).text().trim();
                let valor2 = $(b).children('td').eq(columna).text().trim();

                if (columna === 2) {
                    // 第三列强制转整数比较
                    return parseInt(valor1) - parseInt(valor2);
                } else {
                    // 其他列按字符串比较
                    valor1 = valor1.toUpperCase();
                    valor2 = valor2.toUpperCase();
                    return valor1 < valor2 ? -1 : valor1 > valor2 ? 1 : 0;
                }
            });

            $.each(registros, function (indice, elemento) {
                $('tbody').append(elemento);
            });
        });
    });
});

关键说明 #

• 必须在排序函数内部对DOM读取的文本做类型转换，否则之前的类型转换操作无法作用到排序逻辑中。
• 使用trim()去除文本前后空格，避免因空格导致的数字判断失败或排序异常。

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