繁体   English   中英

DataTables 对混合的数字和文本列进行排序

[英]DataTables sort mixed numeric and text column

我正在尝试构建一个包含一列数字的 DataTable 可排序表,但该列还包含文本NA以表示丢失的数据。 我想知道如何编写自定义排序 function 以便当我在列上排序时NA出现在数字之后而不是在列出值从最大到最小之前出现。 此处的代码笔: https://codepen.io/mayagans/pen/VwKJeMo

 $('#my-table').DataTable({ "autoWidth": false, "order": [] });
 td { padding: 0 20px; } table { margin: 10px 0; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <table id="my-table"> <thead> <th>Nr. </th> <th>Name</th> </thead> <tr> <td>1</td> <td>Carl</td> </tr> <tr> <td>2</td> <td>Alan</td> </tr> <tr> <td>3</td> <td>Bobby</td> </tr> <tr> <td>NA</td> <td>Maya</td> </tr> <tr> <td>NA</td> <td>Jordan</td> </tr> </tr> <tr> <td>-</td> <td>Monica</td> </tr> </table>

所需的 Output:

从最大值到最小值排序时:

 <table id="my-table"> <thead> <th>Nr. </th> <th>Name</th> </thead> <tr> <td>3</td> <td>Bobby</td> </tr> <tr> <td>2</td> <td>Alan</td> </tr> <tr> <td>1</td> <td>Carl</td> </tr> <tr> <td>NA</td> <td>Maya</td> </tr> <tr> <td>NA</td> <td>Jordan</td> </tr> </tr> <tr> <td>-</td> <td>Monica</td> </tr> </table>

任何帮助表示赞赏!

您可以利用正交数据,它允许您存储自定义排序值,该值不同于显示值:

$('#my-table').DataTable( {
  columnDefs: [ { 
    targets: [ 0 ], 
    render: function ( data, type, row ) {
      if ( type === 'sort' ) {
        var sortValue = data;
        switch( data ) {
          case '-':
            sortValue = -999998;
            break;
          case 'NA':
            sortValue = -999999
            break;
          default: // already set, in this case
        } 
        return sortValue;
      } else { 
        return data;
      }
  }
  } ]
} );

这假设您的数值永远不会低于switch语句中使用的两个值。 如果您的整体数据与此不兼容,您可以根据需要进行调整。

我的样本:

在此处输入图像描述

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM