将字符串排序为数字的数据表

Posted 2023-05-07

【中文标题】将字符串排序为数字的数据表

【英文标题】：datatable sorting on string as number

【发布时间】：2017-03-04 11:40:24

【问题描述】：

我有数据表，我想以数字形式排序，它包含像 1st,2nd 之类的值....，这是我的代码，当我对其进行排序时，它对 1st,10th,2nd 等值进行排序，等等如何正确排序?

$('#example').DataTable( 
   //      "columnDefs": [
   //    "visible": false, "targets": 4 
   // ],
"aaSorting": [[1,'asc']],
   "columnDefs": [ 
    "targets": [2,5,6],
    "orderable": false
   ,
  
    "targets": 0,
    "orderable": false
  ,
   "width": "5%", "targets": 0 ,
   "width": "8%", "targets": 1 ],

  initComplete: function () 

    this.api().columns().every( function () 
      var column = this;
      var select = $('<select><option value=""></option></select>')
      .appendTo( $(column.footer()).empty() )
      .on( 'change', function () 
        var val = $.fn.dataTable.util.escapeRegex(
         $(this).val()
         );

        column
        .search( val ? '^'+val+'$' : '', true, false )
        .draw();
       );

      column.data().unique().sort().each( function ( d, j ) 
        select.append( '<option value="'+d+'">'+d+'</option>' )
       );
     );
  
); 

【参考方案1】：

我建议在 DataTable 中使用正交数据和 html 5。这是简单而好的解决方案。

这是一个简单的解决方案，因为它不需要任何配置更改或额外的编码。

这是一个很好的解决方案，因为它将排序值与数据表示分开。因此，您可以向用户显示任何内容并根据需要按值排序。

在每个td 元素中应该有data-order 属性。举个例子：

<td data-order="3120">$3,120/m</td>

更多关于这个https://datatables.net/manual/data/orthogonal-data

【参考方案2】：

我知道的最简单的方法是使用Formatted Numbers 插件

这是一个例子：

jQuery.extend( jQuery.fn.dataTableExt.oSort, 
    "formatted-num-pre": function ( a ) 
        a = (a === "-" || a === "") ? 0 : a.replace( /[^\d\-\.]/g, "" );
        return parseFloat( a );
    ,
 
    "formatted-num-asc": function ( a, b ) 
        return a - b;
    ,
 
    "formatted-num-desc": function ( a, b ) 
        return b - a;
    
 );

$('#tbl_jaar').dataTable( 
     columnDefs: [
        type: 'formatted-num', targets: 0 
     ]
   );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="tbl_jaar">
  <thead>
    <tr>
      <th>Places</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st</td>
    </tr>
    <tr>
      <td>2nd</td>
    </tr>    
    <tr>
      <td>3rd</td>     
    </tr>   
    <tr>
      <td>4th</td>
    </tr>
    <tr>
      <td>5th</td>
    </tr>
    <tr>
      <td>6th</td>
    </tr>
    <tr>
      <td>7th</td>
    </tr>
    <tr>
      <td>8th</td>
    </tr>
    <tr>
      <td>9th</td>
    </tr>
    <tr>
      <td>10th</td>
    </tr>
  </tbody>
</table>

【参考方案3】：

您需要在要排序为数字的 columndef 上将 sType 定义为数字

$('#example').DataTable( 
   "aoColumns": [
       "sType": "numeric" ,
      null,
      null,
      null,
      null
    ],
// define at the place where sorting should by by numeric
// other options goes here
);

// 上面索引为 0 的列将按数字排序，其他列正常自动检测。 aoColumns 的长度应该等于列数。

【参考方案4】：

$.extend($.fn.dataTable.ext.oSort, 
    "numNonStandard-asc": function (a, b) 

      if(!isNaN(parseInt(a.substring(1))))
        a = parseInt(a.substring(1));
      
      if(!isNaN(parseInt(b.substring(1))))
        b = parseInt(b.substring(1));
      
      return (a == b) ? 0 : (a < b) ? 1 : -1;
    ,
    "numNonStandard-desc": function (a, b) 
      if(!isNaN(parseInt(a.substring(1))))
        a = parseInt(a.substring(1));
      
      if(!isNaN(parseInt(b.substring(1))))
        b = parseInt(b.substring(1));
      
      return (a == b) ? 0 : (a < b) ? -1 : 1;
    
  );

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。