using aaColumns and checkboxes...need help pls.

kbmp82

I am new at this and have been trying to figure out what I am doing wrong here but it seems I need some help figuring this out. I'll be honest here, this plugin confuses the heck out of me so I really dont know what I am doing but here is what I am having an issue with. I have a table set up that has a column with checkboxes in it and another column with images.

I need to be able to sort the images by their alt tag as well as be able to submit a form that will get all the values of the checked checkboxes...

I have the image sorting figured out but when i add the checkboxes to the table, it breaks the table and nothing works...here is what I mean:

this works fine and I can sort the image column by their alt tags:

[code]

//make the images column sortable
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"alt-status-pre": function ( a ) {
switch(a.match(/alt="(.*?)"/)[1].toLowerCase()){
case 'request': return 1;
case 'pending': return 2;
case 'approved': return 3;
default: return 4;
}
},

"alt-status-asc": function( a, b ) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},

"alt-status-desc": function(a,b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
} );

$(document).ready(function() {

$('#products').dataTable( {
"aoColumns": [
null,
null,
null,
null,
null,
{ "sType": "alt-status" }

]
} );

} );
[/code]

However, when I add the code below in order to get the checkbox values, it breaks the table completely (CSS and everything stops working):

[code]
$('#requestform').submit( function() {

var sData = $('input', oTable.fnGetNodes()).serialize();
alert( "The following data would have been submitted to the server: \n\n"+sData );
return false;
} );

oTable = $('#products').dataTable( {
"aoColumns": [
null,
null,
null,
null,
null,
{ "sType": "alt-status" }

]
} );

} );
[/code]

Now, if I take out the aaColumns code, the checkboxes work fine but then I can't sort the image columns...
[code]
$('#requestform').submit( function() {
var sData = $('input', oTable.fnGetNodes()).serialize();
alert( "The following data would have been submitted to the server: \n\n"+sData );
return false;
} );

oTable = $('#products').dataTable();

} );
[/code]


how can I set this up so i can do both? If you can provide code with your answer that will help, like I said I don't really understand how to use this plugin properly :/

ulrike

The aoColumns length has to match the number of columns of the table. If it doesn't, the table breaks.
What i do is to count the columns and then adding them to the aoColumns array and calling this complete array when initializing my table :
[code]
$('#products thead th').each( function () {
if ( $(this).hasClass( 'numeric' )) {
aoColumns.push({ "sType": "numeric" });
} else {
aoColumns.push({ "sType": "natural" });
}
} );

var oTable = $('#products').dataTable({
// force sort order
"aoColumns": aoColumns
})

[/code]

So in my case i needed numeric and natural sorting, however, you should apply the sorting you need.
This code supposes your TH have classes to tell you what kind of column it is.