On-delegated click event and fnGetData

gmf811

Hi all,

Disclaimer: I'm fairly new to javascript, jquery and datatables and at the moment am relying on stitching together code in the examples to get somewhere close to what I want to do.

I have a number of datatables, each within jqueryui tabs, displaying different views on the same database. So far so easy. The problem is that I need to be able to select a row, extract data (i.e. keys) from hidden columns and pass those data to jqueryui modal dialogs. I'm struggling with the hidden columns bit.

EDIT: forgot to mention, using dataTables v1.9.4

If I initialise my table thus:
[code]
oTable = $('#my_table').dataTable( {
"bProcessing": true,
"bDeferRender": true,
"bJQueryUI": true,
"bAutoWidth": false,
"sAjaxSource": './loadstuff.php',
"aoColumns": [
{ "mData": "t_bid",
"bVisible": false
},
{ "mData": "t_pid",
"bSortable": false,
"bVisible": false
},
{ "mData": "t_rn" },
{ "mData": "t_bn" },
{ "mData": "t_btn"},
{ "mData": "t_bx" },
{ "mData": "t_by" }
],
"fnServerParams": function ( aoData ) {
aoData.push( {"name": "term", "value": "{S_UID}" } );
}
});
[/code]
Then the columns are hidden correctly and the table displays correctly, but the data from the hidden rows is not available in the DOM, and I can't extract it using the following (which is straight from the example) - I only get the columns that actually appear in the resulting HTML.
[code]
$('body').on('click', 'tbody tr', function() {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
$(this).siblings('.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}


$("td", this).each(function(j) {
console.log("".concat("value: ", j, ", value: ", $(this).text()));
});

});
[/code]

At the moment I've been getting by with a kludge. I've defined a style "hidden", and pushed that to the rows I want to hide.
[code]
.hidden {
visibility:hidden;
column-width: 0px;
}
[/code]

[code]
oTable = $('#my_table').dataTable( {
"bProcessing": true,
"bDeferRender": true,
"bJQueryUI": true,
"bAutoWidth": false,
"sAjaxSource": './loadstuff.php',
"aoColumns": [
{ "mData": "t_bid",
"sClass": "hidden",
"sWidth": "0px"
},
{ "mData": "t_pid",
"bSortable": false,
"sClass": "hidden",
"sWidth": "0px"
},
{ "mData": "t_rn" },
{ "mData": "t_bn" },
{ "mData": "t_btn"},
{ "mData": "t_bx" },
{ "mData": "t_by" }
],
"fnServerParams": function ( aoData ) {
aoData.push( {"name": "term", "value": "{S_UID}" } );
}
});
[/code]

Then I get my table and my data but it looks ugly, leaving empty space where the hidden columns should be.

What I'd like to do is use fnGetData(), which I understand should return the whole hidden row. Then I can fetch all necessary values from the server, [do stuff] with them.

Unfortunately this doesn't send anything to the console:
[code]
$('body').on('click', 'tbody tr', function() {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
$(this).siblings('.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}

var myTable = fnGetData( this );
for(var i=0; i

allan

I've just put this little example together showing fnGetData working with getting data from a hidden column: http://live.datatables.net/bowozav/1/edit . Hopefully it will help :-)

Allan

gmf811

Hi Allan,

Thank you for your speedy response - unfortunately no joy as yet. I have followed your example as best as I can, but the output I get to console for both hidden fields and visible fields is "undefined".

To my novice eyes I can't see that I'm doing anything different to your example with the exception of the data source, but I'm getting very different results.

Is there anything special I need to do if the source data is the result of an ajax call instead of being hard-coded?

jsfiddle demonstrating the problem:

http://jsfiddle.net/9hGTs/

allan

Your data source is objects, but you are trying to access it as arrays?

Just use it as objects: http://jsfiddle.net/9hGTs/1/

Allan

gmf811

It's always the simple things that trip me up - thank you Allan, works a treat!