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>