DataTable升序排序时空单元格居首，需统一置底的技术问询

要实现升序/降序排序时空单元格都固定在表格底部，需要给DataTable注册自定义排序规则，通过自定义逻辑处理空值的排序权重。

步骤1：注册自定义排序插件 #

添加以下代码，定义一个让空值始终排在末尾的排序规则：

// 自定义排序规则：空单元格始终排在末尾
$.fn.dataTable.ext.order['dom-text-null-last'] = function (settings, col) {
    return this.api().column(col, {order:'index'}).nodes().map(function (td, i) {
        var cellValue = $(td).text().trim();
        // 根据当前排序方向，给空值分配极端权重
        return cellValue === '' 
            ? (settings.aaSorting[0][1] === 'asc' ? Infinity : -Infinity) 
            : cellValue;
    });
};

如果目标列是数值类型（比如数字、金额），可以把返回值转为数字，确保排序逻辑准确：

// 针对数值列的自定义排序规则
$.fn.dataTable.ext.order['dom-number-null-last'] = function (settings, col) {
    return this.api().column(col, {order:'index'}).nodes().map(function (td, i) {
        var cellValue = $(td).text().trim();
        return cellValue === '' 
            ? (settings.aaSorting[0][1] === 'asc' ? Infinity : -Infinity) 
            : parseFloat(cellValue);
    });
};

步骤2：修改DataTable初始化配置 #

在初始化代码中，给需要应用规则的列指定orderDataType属性，对应上面定义的排序规则名称：

$('#idealistTable').DataTable({
    "paging": false,
    "searching": false,
    "ordering": true,
    "info": false,
    "order": [[4, "desc"]],
    "columns": [
        null, // 第0列使用默认排序
        null, // 第1列使用默认排序
        null, // 第2列使用默认排序
        null, // 第3列使用默认排序
        { "orderDataType": "dom-text-null-last" }, // 第4列应用自定义排序规则
        // 其他列按需设置null或对应排序规则
    ]
});

如果是数值列，把orderDataType改成dom-number-null-last即可。

原理说明 #

自定义排序规则会在触发排序时，给空单元格分配极端权重：

• 升序排序时，空值返回Infinity（无穷大），会排在所有有效值之后
• 降序排序时，空值返回-Infinity（无穷小），同样会排在所有有效值之后
  这样就能实现无论升序还是降序，空单元格都固定在表格底部的效果。

内容的提问来源于stack exchange，提问作者Basavaraju K R