making TR row clickable as a hyperlink to new page
making TR row clickable as a hyperlink to new page
steven_reid
Posts: 2Questions: 0Answers: 0
Hi,
I have taken over a site that uses DT for listing some students, and I would like to make some improvements to the way that it behaves.
This is the first exposure to DT that I have had, so am starting from scratch..
From the list, we can click on each item in the TD to go into the detail of that user.
At the moment, it is working by putting the hyperlink around the text in the particular cell
[code]
1234
A Student
student@emailaddress.com.au
12 345 678
Yes
[/code]
As you can see there is a lot of duplication here with the hyperlink being listed 6 times for each row. And we have to click on the actual words in each cell to get the hyperlink.
What I would like to have is to the hyperlink active for the whole row, like
[code]
1234
A Student
student@emailaddress.com.au
12 345 678
Yes
[/code]
The code we have is as follows:
[code]
Student ID
Fullname
Email
Phone
Active
';
var oCache = {
iCacheLower: -1
};
function fnSetKey( aoData, sKey, mValue )
{
for ( var i=0, iLen=aoData.length ; i
I have taken over a site that uses DT for listing some students, and I would like to make some improvements to the way that it behaves.
This is the first exposure to DT that I have had, so am starting from scratch..
From the list, we can click on each item in the TD to go into the detail of that user.
At the moment, it is working by putting the hyperlink around the text in the particular cell
[code]
1234
A Student
student@emailaddress.com.au
12 345 678
Yes
[/code]
As you can see there is a lot of duplication here with the hyperlink being listed 6 times for each row. And we have to click on the actual words in each cell to get the hyperlink.
What I would like to have is to the hyperlink active for the whole row, like
[code]
1234
A Student
student@emailaddress.com.au
12 345 678
Yes
[/code]
The code we have is as follows:
[code]
Student ID
Fullname
Phone
Active
';
var oCache = {
iCacheLower: -1
};
function fnSetKey( aoData, sKey, mValue )
{
for ( var i=0, iLen=aoData.length ; i
This discussion has been closed.
Replies
1. DataTables already has "master/detail" functionality:
http://www.datatables.net/release-datatables/examples/api/row_details.html
2. Add an extra column to your table to hold the link.
In both cases, this will keep your column data "clean" in case you ever need to do something else with it.
Thanks for the link.
It wont work in the current situation, as we are opening a page where we can edit the students information, but it will be perfect for another few use cases!
[code]
$('#myTable').on( 'click', 'tbody tr', function () {
window.location.href = $(this).attr('href');
} );
[/code]
Will load the target page in the current window.
Your attempt looks okay, but only if the data is static. Much better to use a delegated event as I have above.
Allan
> .#StudentTable
That's a very odd selector :-). Remove the `.` .
Allan