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. Эта сортировка отлично работает для уникальных значений. Если данные имеют более одного значения (пример: 2H 2016), не перечисляются один за другим. Это проблема. Пожалуйста, помогите мне исправить это.

JSFiddle Link

Answer 1

Используйте DataTables 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>