对财务数据进行排序的数据表答案

【问题标题】：Datatables sorting financial data对财务数据进行排序的数据表
【发布时间】：2015-08-04 23:47:00
【问题描述】：

我正在使用 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();

正确排序此列的最佳方法是什么？默认配置将它们完全无序排序。

【问题讨论】：

你说的完全乱序是什么意思，另外，如果你发布你想要的结果就好了
是的，请描述一下应该如何排序。应该按金额差异还是按百分比排序？或者，更大的差异总是会导致更大的百分比（反之亦然）。我们不知道它与什么相比。
更大的差异并不总是导致更大的百分比增益。每一行之间没有相关性。我想按金额差异排序，但也很好奇如何按百分比排序=）
还有@EnriqueZavaleta 它现在使用第一个排序 - 9.76 (16.46%),- 3.81 (2.99%),- 2.87 (1.37%),8.13 (6.61%),4.63 (3.66%) ,21.79 (11.52%) 等
你的数据源是什么？是静态 HTML 还是通过 Ajax 提取数据？请显示您的 DataTables 初始化代码。

标签： javascript jquery datatables

【解决方案1】：

我一直为这种情况创建自己的排序功能。

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

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));
};

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

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));
};

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

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

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

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

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

请看我的演示here。如果单击表格列标题，您将看到自定义排序生效。排序逻辑可能并不完全符合您的要求，但希望对您有所帮助。

【讨论】：

【解决方案2】：

注意事项

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

解决方案

您可以使用columnDefs 来定位targets 中数据使用从零开始的索引的列（0 用于我的示例中的第一列）并定义列数据type（num 用于数字排序）和render 在执行排序时仅使用字符串的第一个数字部分（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;
          }
        }
     ]
  });

演示

代码和演示请参见下面的示例。

$(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;
          }
        }
     ]
  });
});

<!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>

【讨论】：