Сортировка данных на основе переключателей и флажков

Question

Я использую JQuery datatables и требуется сортировать два столбца с переключателем и флажком. Сортировка Datatables на основе значений, поэтому я не могу сортировать флажки и отмеченные флажки и отмеченные значения.

HBS

<table id="team-members-data"> 
    <thead> 
    <tr> 
     <th>{{Name}}</th> 
     <th>{{Age}}</th> 
     <th>{{RadioButton Column}}</th> 
     <th>{{Checkbox column}}</th> 
    </tr> 
    </thead> 
</table> 

JS файл

var teamMembers = $('#team-members-data').DataTable({ 
    "processing": true, 
    "order": [[ 3, 'asc' ], [ 2, 'asc' ],[ 1, 'asc' ], [ 0, 'asc' ]] 
}); 

Я пытаюсь получить сортировку на основе флажком и радио-кнопки, а также. Дайте мне знать, как это можно сделать.

Answer 1

Вам необходимо использовать пользовательские функции сортировки, см. Custom data source sorting и Checkbox data source.

$.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) 
{ 
    return this.api().column(col, {order:'index'}).nodes().map(function (td, i) { 
     return $('input', td).prop('checked') ? '1' : '0'; 
    }); 
}; 

$.fn.dataTable.ext.order['dom-text'] = function (settings, col) 
{ 
    return this.api().column(col, {order:'index'}).nodes().map(function (td, i) { 
     return $('input', td).val(); 
    }); 
}; 

var teamMembers = $('#team-members-data').DataTable({ 
    "columnDefs": [ 
     { 
     "targets": 2, 
     "orderDataType": "dom-text" 
     }, { 
     "targets": 3, 
     "orderDataType": "dom-checkbox" 
     } 
    ], 
    "order": [[ 3, 'asc' ], [ 2, 'asc' ],[ 1, 'asc' ], [ 0, 'asc' ]] 
}); 

Answer 2

Thanks @Grorocode. Ваш ответ был очень полезным. Вот реализация dom-radio.

$.fn.dataTable.ext.order['dom-radio'] = function (settings, col) { 
    return this.api().column(col, {order:'index'}).nodes().map(function (td, i) { 
     return $('input[type=radio]:checked', td).val(); 
    }); 
}; 

Answer 3

$.fn.dataTable.ext.order['dom-radio'] = function (settings, col) { 
    return this.api().column(col, {order:'index'}).nodes().map(function (td, i) { 
     return $('input', td)[1].checked ? '1' : '0'; 
    }); 
};