Datatable 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链接。这种排序工作正常，为独特的价值观。如果数据有不止一个相同的值（例如：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>