I'm confused about how to get a value from the table

rslevy

I am relatively new to jQuery and very new to this plugin. I have created a table using Ajax and I want to be able to click on a cell and use the value in that cell. I have read that I need to use the fnGetData but I can't figure out how to code it so that it works. Every place I try to put the code doesn't work. My code for creating the data is:


$(document).ready(function(){
$.extend( $.fn.dataTable.defaults, {
"bFilter": false,
"bSort": true,
"iDisplayLength": 25
});
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": 'CreateJSON.asp'
});
});


Where do I put this code:

// Individual cell data
$(document).ready(function() {
oTable = $('#example').dataTable();

oTable.$('td').click( function () {
var sData = oTable.fnGetData( this );
alert( 'The cell clicked on had the value of '+sData );
} );
} );

Chiqui7988

Same problem, this does not work (It ignores the click event)

$(document).ready(function() {
$('#example').dataTable( {

"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "delservi.php",

"sPaginationType": "full_numbers",
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }
]
} ),
oTable = $('#example').dataTable();
oTable.$('td').click( function () {
var sData = oTable.fnGetData( this );
alert( 'The cell clicked on had the value of '+sData );
} );
}
);

Thanks for your help!

allan

You are assigning static events before the data has loaded. The `A` in ajax is "asynchronous" remember!

Use a delegated event:

[code]
$('#example tbody').on( 'click', 'td', function (e) {
...
} );
[/code]

Allan

rslevy

I am still confused where to put this statement. Could you put your code (including some statement like an 'alert' to show that it worked) into the code below:


$(document).ready(function(){
$.extend( $.fn.dataTable.defaults, {
"bFilter": false,
"bSort": true,
"iDisplayLength": 25
});
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": 'CreateJSON.asp'
});
});

Thanks!

Chiqui7988

instead of ... I wrote alert("Row n°: " +$(this).parent().index());

and this displays the row number. It worked fine. It is important to note that the row number refers to actual display order, no idea what data you are accesing to. You'll need some extra data like an identifier.
Thanks a lot!!!!

rslevy

Thanks, but it didn't work. Maybe I'm putting the whole function in the wrong place. The data I am accessing has the unique identifier in the first column and that is what I want to extract regardless of where on the row they click. It would help greatly if you could insert your code in the correct location of the code I showed in my last post.

Thanks.

allan

[code]
$('#example tbody').on( 'click', 'td', function (e) {
alert( 'Cell value clicked on: '+this.innerHTML );
} );
[/code]

Live example: http://live.datatables.net/oniyis/edit#javascript,html

Allan

rslevy

Again, that works for static data but does not work for my AJAX data. I can't give you a live example so all I can do is give you my code and ask you to insert your code into mine (at the correct place) so I can try it out. Here is the full code for my page (minus the .js and .css calls):


$(document).ready(function(){
$.extend( $.fn.dataTable.defaults, {
"bFilter": false,
"bSort": true,
"iDisplayLength": 25
});
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": 'CreateJSON.asp'
});
});











Record #
Last Name
First Name









The code, as is, creates the table correctly and that all works fine. I want to be able to click on any row and have the page display the value in the first column of that row in a pop-up box.

Thanks.

allan

Example updated for Ajax loading - only change it to load via Ajax: http://live.datatables.net/oniyis/2/edit

Allan

rslevy

Ok. Getting closer. It now displays what is in the cell I click on. I want it to display what is in the cell of the first column of the row I click on (no matter which cell I choose in that row). Is that possible?

allan

Simple modification using fnGetData: http://live.datatables.net/oniyis/3/edit

Allan