javascript - 数据表 Alpha - 数字排序

Question

我在我的应用程序中使用 Jquery Datatable。其中，需要实现字母数字排序。我尝试了很多方法但无法实现。以下是排序顺序(升序):

current
2H 2016
2H 2016
4Q 2016
2H 2016
1Q 2017
1H 2017
2H 2017
3Q 2017
4Q 2017
2Q 2017
1H 2018
1Q 2018
2Q 2018
Q1 2018

我已经在以下 JSFiddle 链接中尝试过这个。这种排序对于唯一值工作正常。如果数据有多个相同的值(例如:2H 2016)，则不一一列出。这就是问题所在。请帮我解决这个问题。

JSFiddle Link

Answer 1

使用数据表 natural sorting plugin

$(document).ready(
  function() {
    $('table').dataTable({
      "aoColumns": [{
        "sType": "natural"
      }],
      "aaSorting": [
        [0, "asc"]
      ],
      'bFilter': false,
      'bInfo': false,
      'bLengthChange': false,
      'bPaginate': false
    });
  });

* {
  font-family: sans-serif;
}
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid #666;
  padding: 5px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://datatables.net/download/build/jquery.dataTables.js"></script>
<script src="http://cdn.datatables.net/plug-ins/1.10.13/sorting/natural.js"></script>
<table>
  <thead>
    <tr>
      <th>Timing</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-order="2017 2Q">2Q 2017</td>
    </tr>
    <tr>
      <td data-order="2017 1Q">1Q 2017</td>
    </tr>
    <tr>
      <td data-order="2017 1H">1H 2017</td>
    </tr>
    <tr>
      <td data-order="current">current</td>
    </tr>
    <tr>
      <td data-order="2017 2H">2H 2017</td>
    </tr>
    <tr>
      <td data-order="2017 3Q">3Q 2017</td>
    </tr>
    <tr>
      <td data-order="2017 4Q">4Q 2017</td>
    </tr>
    <tr>
      <td data-order="2018 1H">1H 2018</td>
    </tr>
    <tr>
      <td data-order="2018 1Q">1Q 2018</td>
    </tr>
    <tr>
      <td data-order="2016 2H">2H 2016</td>
    </tr>
    <tr>
      <td data-order="2017 2Q">2Q 2017</td>
    </tr>
    <tr>
      <td data-order="2018 2Q">2Q 2018</td>
    </tr>
    <tr>
      <td data-order="2016 4Q">4Q 2016</td>
    </tr>
    <tr>
      <td data-order="2018 Q1">Q1 2018</td>
    </tr>
    <tr>
      <td data-order="2016 2H">2H 2016</td>
    </tr>
  </tbody>
</table>