Live Dom Sort, mulitple checkbox columns, and double clicking.

billfry

So here's some odd behavior that I don't know how to address.
I have a table with one standard column, one text input column, and varying numbers of checkbox columns.
I've scripted (server-side asp) to put into the javascript the right number of columns, and all looks well, except some odd results.
1. the normal column works perfectly.
2. the text input column works, but you must click the header twice to get it do do anything.
3. the checkbox colums have a similiar click issue, but seem to rotate the rows rather than actually sort them.

Here's my javascript code for the table (as delivered to the browser):

First, a direct cut-n-paste from the dom_sort example. (outside my &(document).ready function as seen below).
[code]
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
{
var aData = [];
$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
aData.push( this.value );
} );
return aData;
}
/* Create an array with the values of all the select options in a column */
$.fn.dataTableExt.afnSortData['dom-select'] = function ( oSettings, iColumn )
{
var aData = [];
$( 'td:eq('+iColumn+') select', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
aData.push( $(this).val() );
} );
return aData;
}
/* Create an array with the values of all the checkboxes in a column */
$.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;
}
[/code]

This is the code to initialize the table. The final two nulls are columns I don't sort on.
[code]
$(document).ready(function() {
var rTable = $('#tblRoles').dataTable( {
"sDom": '<"H"f>t<"F">',
"bJQueryUI": true,
"bPaginate": false, /* turn of pagination for this list. */
"aoColumnDefs": [
{ "bSearchable": false, "bSortable": false, "aTargets": [ 11, 12 ] },
],
"aoColumns": [
null,
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
{ "sSortDataType": "dom-checkbox" },
null,
null
],
"aaSorting": [[0, 'asc']]
});

[/code]

I've watched it through firebug, and it seems to call the function correctly, but I'm not great with Javascript, so following all the sorting algorithm is a bit over my head. I've tried reducing it down to just one checkbox & one text entry column, but that didn't seem to affect it.

Any help would be much appreciated.

Blessings,

Bill Fry.

billfry

Nobody has any clue on this? Or is it that this thread is just not being read? Funny how I see comments & conversations on other threads rapidly... Maybe paid support has something to do with it.

robertbrower

I'm not sure. But I have used checkboxes in the datatable. I do it the old fashioned way, since i am too strapped for time to upgrade datatables across my entire app.

I use fnRender to display the textboxes like this:

, "iDisplayLength": 10
, "sPaginationType": "full_numbers"
, "sScrollY": "0px"
, "aoColumnDefs": [
{
"aTargets": [0]
, "bSearchable": false
, "bSortable": true
, "fnRender": function (obj) {
var html = '';
return html;
}
, "bUseRendered": false
}

Clicking the checkbox calls the "toggleUser" method of my page's jquery plugin which in turn calls the toggleUser method that is private to the page's plugin. That method looks like this:


var toggleUser = function ($this, settings, event, obj, row, column) {
$($.fn.dataTable.fnTables(true)).each(function (i, table) {
if ($.contains(settings.$usersTableContainer.get(0), table)) {
var $dataTable = $(table).dataTable();
var aData = $dataTable.fnGetData(row);
// Most browsers change the state of the checked atttribute before dispatching the event
// and reset the state if the event is cancelled, i.e. return false.
// http://bugs.jquery.com/ticket/3827
aData[0] = $(obj).is(":checked") == true ? "checked" : "unchecked";
}
});
};

So, after all, the data that is stored for this column is either "checked" or "unchecked" and sorting works as it normally would.

I hope this helps. I know how frustrating it can be when you feel alone.

Robert

billfry

Robert, Thank you so much for your response. I am not well versed in Javascript, so it will take a bit to digest this alternative, but I really appreciate the help.

To me one of the odd things is that the sample/ live demo page seems to work, whereas mine does not. I'm going to also try deconstructing the my implementation a bit to see if I can find the difference between that & the demo.

Again, thank you for the help & response.

blessings,

Bill Fry.