DataTables带千位空格格式化数字与字符串排序问题解决方案咨询

旧方案失效原因 #

• 对所有列统一指定了数值排序类型，包含带字母的非数值列（如编号列01A），强行转换数值会产生NaN，导致排序逻辑混乱
• 自定义预处理逻辑未兼容配置的本地化数字格式，边缘场景转换结果异常

方案1：原生HTML5属性方案（最优雅、无兼容问题） #

DataTables原生支持data-order/data-sort属性，排序时会优先读取该属性的纯数值，页面仍展示格式化后的内容，无需编写任何自定义排序插件，适配所有数字格式场景。
示例HTML结构：

<tr>
  <td style="text-align: left;">01A</td>
  <!-- 给数值列加data-order属性，值为纯数字 -->
  <td style="text-align: center;" data-order="10">10 m2</td>
  <td style="text-align: right;" data-order="1">1</td>
  <td style="text-align: left;">1</td>
  <td style="text-align: center;" data-order="502200">502 200 PLN</td>
  <td style="text-align: right;" data-order="7200">7 200 PLN za m2</td>
</tr>

对应JS初始化无需额外配置排序规则，直接简化为：

jQuery(document).ready(function() {
    jQuery('#mieszkaniaList').DataTable({
        responsive: true,
        "language": {
            "decimal": ",",
            "thousands": " ",
            "lengthMenu": "每页显示 _MENU_ 条房产记录",
            "zeroRecords": "抱歉，当前筛选条件下没有匹配的房产...",
            "info": "第 _PAGE_ 页，共 _PAGES_ 页",
            "infoEmpty": "暂无房产记录...",
            "processing": "正在加载房产数据...",
            "search": "搜索",
            "paginate": {
                "first":      "首页",
                "last":       "尾页",
                "next":       "下一页",
                "previous":   "上一页"
            },
            "infoFiltered": "(从 _MAX_ 条记录中筛选)"
        }
    });
});

方案2：无法修改HTML结构时的修正版自定义排序 #

如果没有权限修改HTML代码，可修正原有自定义排序逻辑，只给数值列指定排序类型：

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
  "formatted_numbers-pre": function ( a ) {
    // 处理空值
    if (!a || a.trim() === "") return 0;
    // 适配本地化数字格式：先把千分位空格去掉，再把逗号转成小数点
    let pureNumStr = a.replace(/\s/g, '').replace(/,/g, '.').replace( /[^\d\-\.]/g, "" );
    let num = parseFloat(pureNumStr);
    // 处理无法转成数字的异常情况
    return isNaN(num) ? 0 : num;
  },
  "formatted_numbers-asc": function ( a, b ) {
    return a - b;
  },
  "formatted_numbers-desc": function ( a, b ) {
    return b - a;
  }
});

jQuery(document).ready(function() {
    jQuery('#mieszkaniaList').DataTable({
        responsive: true,
        "columnDefs": [
            // 只给数值列指定排序类型，对应列索引从0开始：1=面积、2=楼层、4=总价、5=单价
            { "type": "formatted_numbers", "targets": [1,2,4,5]},
         ],
        "language": {
            "decimal": ",",
            "thousands": " ",
            "lengthMenu": "每页显示 _MENU_ 条房产记录",
            "zeroRecords": "抱歉，当前筛选条件下没有匹配的房产...",
            "info": "第 _PAGE_ 页，共 _PAGES_ 页",
            "infoEmpty": "暂无房产记录...",
            "processing": "正在加载房产数据...",
            "search": "搜索",
            "paginate": {
                "first":      "首页",
                "last":       "尾页",
                "next":       "下一页",
                "previous":   "上一页"
            },
            "infoFiltered": "(从 _MAX_ 条记录中筛选)"
        }
    });
});

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