How to make a row clickable using json data
How to make a row clickable using json data
dlbarron
Posts: 23Questions: 1Answers: 0
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.
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.
This discussion has been closed.
Replies
[code]
$('#firmtable tbody').on( 'click', 'tr', function (e) {...} );
[/code]
Allan
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
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
Allan
$('#firmtable tbody tr).css("cursor", "pointer"); does nothing, and neither does anything else I've tried.
[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