Clickable rows

TheGuest

Hi people,

I just wanted to come on here and first of all say how awesome DataTables is :)
Secondly, the following piece of code shows how to make rows clickable:

[code]
$table = $('#table').dataTable(
{
"bAutoWidth": false,
"bProcessing": true,
"sAjaxSource": 'Source.ashx',
"bStateSave": true,
"aoColumns": [{ "bSearchable": false, "bVisible": false }, null, null],
"fnRowCallback": function(nRow, aData)
{
$(nRow).unbind('click').bind('click', function()
{
alert('Clicked row with ID ' + aData[0]);
}

return nRow;
}
}
[/code]

As you can see my first column is an ID which i have hidden from the user followed by to columns which the user can see.

The rebinding of the click event is essential here since all goes well until you sort your table. Without unbinding the click events you will stack them on each other firing multiple events when you just want the one event fired.

I don't know if this is a bug or a "feature" but I thought I would mention it since I could not find any other working way to get clickable rows. (I did not notice this feature before since my click event fires an ajax call which on it's turn displays a form. When I was testing I noticed more than one ajax call was made so hence my solution here :])

Greetings!

allan

Hi TheGuest,

Thanks very much for your kind words! It is really great to hear that DataTables is well received :-)

Regarding your note for events handling - the reason that the events are added on the secodn page, or other rows other than the first page is due to the fact that DataTables removes the nodes from the DOM for display, so the event handler isn't added.

This is dealt with by these two examples:

Add events before initialising DataTables: http://datatables.net/examples/advanced_init/events_post_init.html
Add events after initialising DataTables: http://datatables.net/examples/advanced_init/events_pre_init.html

Regards,
Allan

TheGuest

Hi Allan,

Pagination wasn't the problem here. Sorting was the problem, when I sorted my data the click events got stacked if I used the following line:

[code]
$(nRow).click(function()
[/code]

So to prevent that you need to unbind any existing click event before you can add a new one:

[code]
$(nRow).unbind('click').bind('click', function()
[/code]

Try the first line of code with a table displaying all data on the first page with an ajax source, then sort different columns a few time. You will get multiple popups when you click on a row.

Gr,
TheGuest

allan

Hi TheGuest,

I think the problem with the sorting is basically the same as the paging. When the Ajax data has loaded, then one would need to get fnGetNodes() to get all of the TR elements and then use that to apply the event handler to. The way to do this with Ajax data is to use fnGetNodes() in fnInitComplete ( http://datatables.net/usage/callbacks#fnInitComplete ). It saves binding and unbinding events on each draw.

This might also be of interest to you: http://sprymedia.co.uk/article/Visual+Event . Visual Event is a bookmarklet I put together which which show which nodes have an event attached to them. It can be quite interesting (as well as useful) :-)

Regards,
Allan

posthy

Hi
I had a problem like this, and noticed that if you have [code]bDeferRender = true[/code] than with fnGetNodes() in fnInitComplete you can add your event only for the first page rows, (and they are persistent, sort or paginate wont remove them), your other rows not showed in the first state wont get the event. With [code]bDeferRender = false[/code] everything works well. It's kinda logical, but can be a bit annoying, i think it worths a note in the reference.
Btw. DataTables is great, keep up the good work :)

allan

It is mentioned somewhere on this site, but I can't remember exactly where! So yup - I think the docs could do with mentioning this directly.

Its good practice to use delegated / live events anyway ;-)

Allan