How to make a row clickable using json data

dlbarron

I'm seeing some references to how to bind a click event to the rows in a datatable but I'm not clear on how it works. I see references to fnDrawCallback but I haven't had any luck getting it to work, so I would appreciate whatever help I can get.

I'm creating the table empty and then populating it from a database using JSON and that part is working fine, but I want to be able to click anywhere in a row and have that kick off another Javascript function to pull more data from the database and display that. I haven't seen any examples of that so far.

Here is the javascript I'm using to populate the table:

[code]
function fillFirmTable() {
$.ajax({
url: "./FirmServlet?action=all",
cache: false,
dataType: "json",
success: function(data) {
$('#firmtable').dataTable().fnClearTable();
$.each(data, function(k,v) {
var firmid = (v.firmid) ? v.firmid : '0';
var firmname = (v.firmname) ? v.firmname : 'Firm Name';
$('#firmtable').dataTable().fnAddData( [
firmid,
firmname,
]
);
});
}
});
}
[/code]

This is working, the table is populating, the pagin works, the search works. In fact it all looks really good. But I'm stumped on how to move to the next step.

Thanks very much.

allan

Use a 'live' event:

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

Allan

dlbarron

Where would that bit of code go? In the ready function or when the data is loaded?
How would I get the data associated with the row? I'm sure there is a function in the api that handles that but which function and what parameters does it require?
In order to pull out the data from the database I have to use the value that is shown in one of the columns, so how would I get that value?

Thanks

allan

> Where would that bit of code go?

In the ready function - see http://api.jquery.com/on/

> How would I get the data associated with the row?

Use fnGetData . That will get the data for a cell or the whole row.

Allan

dlbarron

I will dig into that. While I am looking how do I change the cursor to a pointer for each row in the table?

allan

Top Google hit for "css cursor": http://www.echoecho.com/csscursors.htm :-)

Allan

dlbarron

Yes, I had seen that and many other references to changing the cursor with css. I was hoping for something more specific to JQuery? None of the things I've tried have had any affect. For example:

$('#firmtable tbody tr).css("cursor", "pointer"); does nothing, and neither does anything else I've tried.

allan

Why would you want to do it with jQuery? What's wrong with CSS?

dlbarron

Nothing is wrong with CSS, I am just more comfortable doing these things in jquery. I don't know the css syntax that would change the cursor for the rows in one table but not another.

dlbarron

I found how to do it.
[code]

#firmtable tr {
cursor: pointer
}

[/code]
Then in the ready function this:
[code]
$(document).on('hover','#firmtable tr', function() {
$(this).css("cursor","pointer");
});
[/code]

allan

Personally I'd say just use CSS - there is no need for jQuery there. But up to you :-)

Allan