Checkbox sort in DataTables using jQuery
what i did is creatinga bool var in hidden P so it will be in the sameplace as the checkbox.than i disabled the option of change value in checkbox and the sorting is now working.
Found this example:
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn )
{
var aData = [];
$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
aData.push( this.checked==true ? "1" : "0" );
} );
return aData;
}
Initialized like so:
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
null,
null,
null,
{ "sSortDataType": "dom-checkbox" }
]
} );
} );
Here: http://www.datatables.net/examples/plug-ins/dom_sort.html
I had to slightly tweak the answer provided by Moby's Stunt Double
. No additional sorting plug-in required! Just a little custom coding.
Thanks for all the ideas, everyone! For some reason I had to do special handling for my table that was not a general solution. Which was fine by me.
My checkbox was disabled and checked programatically, so I couldn't call .checked
. The call based on iColumn also threw things off; probably because I had a hidden 0th column.
This is what worked for me:
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn ) {
var aData = [];
$(oSettings.oApi._fnGetTrNodes(oSettings)).each( function () {
var checker = $(this).find('.classOnSurroundingSpan input');
aData.push( checker.prop("checked")==true ? "1" : "0" );
} );
return aData;
}
My mark-up looked like this (the surrounding span was part of a solution to enable tracking a click on a disabled checkbox):
<span class='classOnSurroundingSpan'><input type='checkbox' disabled='disabled'/></span>
My table definition was (in part):
"aoColumnDefs": [
{"sSortDataType": "dom-checkbox",
"aTargets":[1],
"asSorting": ["desc"]}
]
This solution worked for me so I wrote up a blog post on it.
http://blog.josephmisiti.com/sorting-booleans-in-jquery-datatables