如何对DataTables含字母数字混合的列忽略字母按数字排序？

完全可以实现忽略字母、仅按数字部分排序的需求，你可以通过自定义DataTables的排序插件达成目标，具体操作如下：

• 步骤1：注册自定义排序规则
  定义一个自定义排序类型，提取第一列字符串里的数字段（即从第三个-分隔后的部分，比如AA-EC-1991-175中的1991-175），以此作为排序依据。

• 步骤2：指定列排序类型
  初始化DataTables时，为第一列配置使用这个自定义排序规则。

修改后的完整代码 #

JavaScript部分

// 注册自定义排序插件
$.fn.dataTable.ext.type.order['numeric-part-pre'] = function(data) {
  // 提取字符串中从第三个'-'开始的数字段
  const parts = data.split('-');
  if (parts.length >= 3) {
    return parts.slice(2).join('-');
  }
  return data; // 处理格式异常的情况
};

$(document).ready(function() {
  var table = $('#example_full').DataTable({
    responsive: true,
    paging: false,
    searching: true,
    lengthChange: false,
    bInfo: false,
    bSort: true,
    columnDefs: [
      { 
        targets: 0, // 目标为第一列
        type: 'numeric-part-pre' // 应用自定义排序规则
      }
    ]
  });
});

HTML部分

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <meta charset=utf-8 />
  </head>
  <body>
    <table id="example_full" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;">
      <thead>
        <tr>
          <th>1</th>
          <th data-orderable="false">2</th>
          <th data-orderable="false">3</th>
          <th data-orderable="false">4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td nowrap="nowrap"><p>AA-EC-1991-175</p></td>
          <td>test1</td>
          <td>5</td>
          <td>16</td>
        </tr>
        <tr>
          <td nowrap="nowrap"><p>AA-EC-1991-190</p></td>
          <td>test2</td>
          <td>test2</td>
          <td>test2</td>
        </tr>
        <tr>
          <td nowrap="nowrap"><p>AA-EC-2011-50</p></td>
          <td>test3</td>
          <td>test3</td>
          <td>test3</td>
        </tr>
        <tr>
          <td nowrap="nowrap"><p>AA-EC-2014-90</p></td>
          <td>test4</td>
          <td>test4</td>
          <td>test4</td>
        </tr>
        <tr>
          <td nowrap="nowrap"><p>AA-EC-2021-11</p></td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>
        <tr>
          <td nowrap="nowrap"><p>AA-MW-1991-136</p></td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>
        <tr>
          <td nowrap="nowrap"><p>AA-WE-2011-99</p></td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>
        <tr>
          <td nowrap="nowrap"><p>OTS-AP-2010-03</p></td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>
        <tr>
          <td nowrap="nowrap"><p>AA-WE-2011-99</p></td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>
        <tr>
          <td nowrap="nowrap"><p>AA-EC-2009-98</p></td>
          <td>test5</td>
          <td>test5</td>
          <td>test5</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

效果说明 #

使用上述代码后，第一列会自动忽略前面的字母前缀，仅按xxxx-xxx格式的数字段排序，升序结果完全符合预期：

• AA-MW-1991-136（第一）
• AA-EC-1991-175（第二）
• AA-EC-1991-190（第三）

内容的提问来源于stack exchange，提问作者magicsinger