Question

我正在使用jQuery DataTables 1.10.7并且在排序特定列时遇到问题。

数据是金额差异和百分比差异的组合。我想按量差异排序，但也很好奇如何按百分比排序。

所以数据的一个例子是：

<td>4.75 (3.75%)</td>
<td>-3.92 (3.08%)</td>
<td>21.91 (11.59%)</td>
<td>-9.75 (16.44%)</td>
<td>-2.87 (1.37%)</td>
<td>2.76 (1.32%)</td>
<td>19.59 (7.88%)</td>
<td>19.67 (7.92%)</td>

我的DataTables初始化代码：

$('#table').DataTable();

正确排序此列的最佳方法是什么？默认配置完全不按顺序排序。

Answer 1

我总是为这样的案例创建自己的排序函数。

首先，创建一个函数来对列数据进行升序排序：

＆＃13;

jQuery.fn.dataTableExt.oSort['custom-sorting-asc']  = function(a,b) {    
    var x = a.split('(')[0];
    var y = b.split('(')[0];
    x = parseFloat( x );    
    y = parseFloat( y );
    
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

＆＃13;

其次，创建一个函数来对列数据进行降序排序：

＆＃13;

jQuery.fn.dataTableExt.oSort['custom-sorting-desc']  = function(a,b) {    
    var x = a.split('(')[0];
    var y = b.split('(')[0];
    x = parseFloat( x );    
    y = parseFloat( y );
    
    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};

＆＃13;

最后，将函数绑定到DataTable中的相应列：

＆＃13;

$(document).ready(function(){
    $('#myTable').dataTable( {
        "columns": [			
            { "sType": "custom-sorting" }			
        ]
    });
});

＆＃13;

此示例将排序函数绑定到表中的第一列。如果需要将它们绑定到第二列，则可以使用以下代码：

＆＃13;

$('#myTable').dataTable( {
    "columns": [	
        null,
        { "sType": "custom-sorting" }			
    ]
});

＆＃13;

此代码示例将按十进制值（例如19.59）排序，而不是百分比。

请参阅我的演示here。如果单击表列标题，您将看到自定义排序生效。排序逻辑可能不完全是您所追求的，但希望它有所帮助。

Answer 2

备注

我强烈建议在可用性和功能（排序/过滤）的单独列中显示数量和百分比，以及表格的用途。同样，不需要额外的编程。

<强>解

您可以使用columnDefs来定位数据在targets中使用从零开始的索引的列（我的示例中的第一列为0）并定义列数据{{ 3}}（num用于数字排序）和type在执行排序时仅使用字符串的第一个数字部分（type === 'sort'）。

例如：

var table = $('#example').DataTable({ columnDefs : [ { targets: 0, type: 'num', render: function(data, type, full, meta){ if(type === 'sort'){ data = parseFloat(data); } return data; } } ] });

<强>样本

请参阅下面的示例以获取代码和演示。

＆＃13;
＆＃13;
$(document).ready(function() { var table = $('#example').DataTable({ columnDefs : [ { targets: 0, type: 'num', render: function(data, type, full, meta){ if(type === 'sort'){ data = parseFloat(data); } return data; } } ] }); });
＆＃13;
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> <script src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> </head> <body> <table id="example" class="display" width="100%"> <thead> <tr><th>Data</th></tr> </thead> <tbody> <tr><td>4.75(3.75%)</td></tr> <tr><td>-3.92 (3.08%)</td></tr> <tr><td>21.91 (11.59%)</td></tr> <tr><td>-9.75 (16.44%)</td></tr> <tr><td>-2.87 (1.37%)</td></tr> <tr><td>2.76 (1.32%)</td></tr> <tr><td>19.59 (7.88%)</td></tr> <tr><td>19.67 (7.92%)</td></tr> </tbody> </table> </body> </html>
＆＃13;
＆＃13;
＆＃13;

数据表对财务数据进行排序

2 个答案: