Get ID on click

tdktank59

Allright so ive am using DataTables 1.5B9

I need to on clicking a row (got this part down)

How would I go about actually getting the data out of a single column in a row.
for example

ID | SID | Status | Owner | Assigned To

ID is hidden since the user does not need to see this. However I need to on clicking of a row grab the ID of that row.

allan

Hi tdktank59,

So you have a click on a row right? What you can do is pass that event node (either a TR or a TD will do) to fnGetPosition() ( http://datatables.net/api#fnGetPosition ). This function will tell you where in DataTables internal storage that row is contained. Then you can use fnGetData() ( http://datatables.net/api#fnGetData ) with that information to get your ID.

For example:

[code]
$('tr').click( function () {
var iPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( iPos );
var iId = aData[0];
...
} );
[/code]

(warning - I've not actually tested this code - so there could be an elementary syntax error - but the idea should be right!)

Hope this helps,
Allan

tdktank59

I am using this to do the click event (its acutally a dblclick event tho)

[code]
$("#example tbody").dblclick(function(event) {
var iId = 1; // Get the ID from the table
alert('Edit Mode - ID: '+iId);
});
[/code]

while using tr instead of the #example tbody does nothing. In fact breaks the dblclick function...
And using the tbody does not work... TO get the value...

Sorry for these seemingly simple questions Im not much of a JS person...

allan

I would try changing your selector to be $("#example tbody tr") so it attaches the events to the TR elements, rather than the TBODY (not sure what would happen there to be honest - it certainly wouldn't be able to use fnGetPosition).

You might be interested in my "Visual Event" bookmarklet which shows which elements on the page have events attached to them: http://sprymedia.co.uk/article/Visual+Event

Regards,
Allan

tdktank59

Does not work (The TR thing)... Heres what im using...
Very nice visual event thing thats sweet!
[code]

var oTable;
var giRedraw = false;

$(document).ready(function() {
$("#example tbody").click(function(event) {
if ( $(event.target.parentNode).hasClass('row_selected') )
$(event.target.parentNode).removeClass('row_selected');
else
$(event.target.parentNode).addClass('row_selected');
});

$("#example tbody").dblclick(function(event) {
var iId = 1; // Get the ID from the table
alert('Edit Mode - ID: '+iId);
});

oTable = $('#example').dataTable( {
"aoColumns": [
/* ID */ { "bVisible": false },
/* SID */ null,
/* Full Name */ null,
/* Status */ null,
/* Owner */ null,
/* Assigned To */ null
],
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "<?php echo base_url(); ?>problems/query",
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */

var work_category = document.getElementById('work_category');
var sets = document.getElementById('sets');
var employer = document.getElementById('employer');
var error_type = document.getElementById('error_type');
var status = document.getElementById('work_category');
var phase = document.getElementById('phase');
var extract = document.getElementById('extract');

aoData.push( { "name": "source", "value": "<?php echo $this->router->method; ?>"},
{ "name": "work_category", "value": work_category.value },
{ "name": "sets", "value": sets.value },
{ "name": "employer", "value": employer.value },
{ "name": "error_type", "value": error_type.value },
{ "name": "status", "value": status.value },
{ "name": "phase", "value": phase.value },
{ "name": "extract", "value": extract.value }
);
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
} );
}
}).fnSetFilteringDelay(1000);
});






ID
SID
Full Name
Status
Owner
Assigned To






[/code]

allan

It looks like your selectors for the events handling are still using '#example tbody'. I'd suggest trying to follow my instructions in my first post in this thread, and seeing it that fixes it for you. You also aren't using any of the API functions, so you won't be able to get any of the data. The API functions I think you need are also in the first post.

Allan

tdktank59

Even with your stuff (which I tested right after you posted those lol) thus the

"while using tr instead of the #example tbody does nothing. In fact breaks the dblclick function...
And using the tbody does not work... TO get the value..."

comment in my post a while back...Anyways enough trying to attack you.

I did try it, but it does not work. BTW I like that visual event thingy that you linked to as well!

allan

Hi tdtank59,

Try the following - it works for me:

[code]
$("#example tbody").live( 'click', function(event) {
if ( $(event.target.parentNode).hasClass('row_selected') )
$(event.target.parentNode).removeClass('row_selected');
else
$(event.target.parentNode).addClass('row_selected');
});

$("#example tbody").live( 'dblclick', function(event) {
var iPos = oTable.fnGetPosition( event.target.parentNode );
var aData = oTable.fnGetData( iPos );
var iId = aData[0];
console.log( iId );
});
[/code]

Allan

tdktank59

It works!
Awesome!!!

Now all I need to be able to do is get all the IDs of the selected ones so I can do batch processing on these selected rows.

Any ideas on how to do this? I guess I could create an array with all that have row_selected tags... However other than creating that array every time they click I have no idea how to pull it on clicking of a button...

allan

So I think there are two options:

1. Construct an array whenever you need it with the selected elements (like on an Ajax request or whatever) - which is the approach I've gone for in my example: http://datatables.net/examples/example_select_row.html

2. Use the click event handler to push and remove element onto and from an array. The advantage of this method is that it should be much faster, particularly if you need to process this array a lot.

Allan

tdktank59

Sounds like the easiest way will be the spit it into a hidden field and hit the batch process button lol...