如何使用自然排序插件制作工作数据表？答案

【问题标题】：How to make work DataTables with Natural sort plugin?如何使用自然排序插件制作工作数据表？
【发布时间】：2012-04-24 20:30:17
【问题描述】：

我见过一些类似的问题，但在我的情况下没有正确答案。

我使用DataTables 插件对一些表进行排序。

但是我们不能像数字那样对数据进行排序，而它们不是 (nut ;-p)。例如，我们不能像这样对格式化的价格进行排序：

2 150 000 欧元
4 500 000 欧元
225 000 欧元

所以我尝试包含一个名为“Natural sort”的DataTables plugin。但这似乎不起作用，我可能会犯一些错误，但我找不到它们。

任何帮助将不胜感激。

您需要查看/测试它的所有内容：JSfiddle（尝试对列进行排序...）

【问题讨论】：

标签： jquery datatables natural-sort

【解决方案1】：

所以看起来你有两个问题。首先，dT 没有选择您的自定义排序 - 它只是忽略它并使用标准排序。我可以通过为每一列指定排序来解决这个问题：

$('#table_list').dataTable({
    "aoColumns": [null, {"sType": "natural"}, null, null],
    "aaSorting": [[ 1, "asc" ]],
    "sScrollX": "100%",
});

其次，自然排序不会按照您期望的方式对这些数字进行排序。它会占用第一个数字部分直到空格并对其进行排序，如下所示：

2 150 000 €
4 750 000 €
210 000 €

所以您可能只想编写自己的排序。这是我试过的一个例子：

function testSort( a, b ) {
    var aa = a.replace(/[ \.]/g,''), bb = b.replace(/[ \.]/g,'');
    aa = parseInt( aa.substring( 0, aa.length - 1 ) );
    bb = parseInt( bb.substring( 0, bb.length - 1 ) );
    return aa == bb ? 0 : ( aa < bb ? -1 : 1 );
}

关键是删除空格、句点和欧元符号，以便可以将其读取为数字。

【讨论】：

感谢您的回答。我已经尝试过jsfiddle.net/DzaQe/2，但它似乎也不起作用。函数 naturalSort(a,b) 不起作用？你可以在这里看到例子overset.com/2008/09/01/…我认为插件调用“jQuery.fn.dataTableExt.oSort['natural-...']”有问题并且不确定{“sType”：“natural”}也是正确的语法...
该页面上的所有示例都没有对具有千位分隔符的常规数字进行排序。我看着你的小提琴；你需要return testSort( a, b ); 而不是调用testSort 然后return naturalSort( a, b );。我还更新了我的代码，因为您将千位分隔符从 ` ` 更改为 .。
在这里，我把你的小提琴分叉了：jsfiddle.net/v2L4T/1 使用 testSort 作为价格列，naturalSort 作为其余部分。
哦，感谢 +1 的帮助。我也找到了另一种方法。但是你的代码似乎更轻:-)有什么想法可以将 testSort() 实现为 naturalSort() 吗？

【解决方案2】：

感谢@Ryan P，我的 sType 声明错误...

最后，我需要添加更多插件以使其正常工作，如果它可以帮助某人，我会分享它：

自然排序：对于 varchar 值

jQuery.fn.dataTableExt.oSort['natural-asc']  = function(a,b) {
    return naturalSort(a,b);
};

jQuery.fn.dataTableExt.oSort['natural-desc'] = function(a,b) {
    return naturalSort(a,b) * -1;
};

将“null”类型转换为格式化数字：

jQuery.fn.dataTableExt.aTypes.unshift(  
    function ( sData )  
    {  
        var deformatted = sData.replace(/[^\d\-\.\/a-zA-Z]/g,'');
        if ( $.isNumeric( deformatted ) ) {
            return 'formatted-num';
        }
        return null;  
    }  
);

Formatted-num : for... 格式化数字值

jQuery.fn.dataTableExt.oSort['formatted-num-asc'] = function(a,b) {
    /* Remove any formatting */
    var x = a.match(/\d/) ? a.replace( /[^\d\-\.]/g, "" ) : 0;
    var y = b.match(/\d/) ? b.replace( /[^\d\-\.]/g, "" ) : 0;

    /* Parse and return */
    return parseFloat(x) - parseFloat(y);
};

jQuery.fn.dataTableExt.oSort['formatted-num-desc'] = function(a,b) {
    var x = a.match(/\d/) ? a.replace( /[^\d\-\.]/g, "" ) : 0;
    var y = b.match(/\d/) ? b.replace( /[^\d\-\.]/g, "" ) : 0;

    return parseFloat(y) - parseFloat(x);
};

这里的工作示例：http://jsfiddle.net/DzaQe/3/

【讨论】：