making TR row clickable as a hyperlink to new page

making TR row clickable as a hyperlink to new page

steven_reidsteven_reid Posts: 2Questions: 0Answers: 0
edited February 2014 in DataTables 1.9
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

Replies

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
    I'm not smart enough to do what you want, but I could point you to alternative ways of achieving a similar result.
    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.
  • steven_reidsteven_reid Posts: 2Questions: 0Answers: 0
    Hi Tangerine.
    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!
  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    I don't think this is really a DataTables issue, but more a general jQuery one. Something like:

    [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
  • allanallan Posts: 63,368Questions: 1Answers: 10,449 Site admin
    Oh:

    > .#StudentTable

    That's a very odd selector :-). Remove the `.` .

    Allan
This discussion has been closed.