Datatable Sortierung basierend auf Radio-Buttons und Kontrollkästchen

Question

Ich benutze JQuery-Databases und es ist erforderlich, zwei Spalten zu sortieren, die Radio-Button und Kontrollkästchen hat. Datatables sortieren auf der Basis von Werten, so dass ich nicht nach aktivierten und deaktivierten Werten für Kontrollkästchen und Optionsfelder sortieren kann.

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

Datei

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

ich auch auf der Basis von Checkbox und Radio-Button zu erhalten Sortierung versuchen. Lass mich wissen, wie es geht.

Answer 1

Sie müssen benutzerdefinierte Sortierfunktionen verwenden, siehe Custom data source sorting und 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

Dank @Gyrocode. Ihre Antwort war sehr hilfreich. Hier ist eine Implementierung von 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'; 
    }); 
};