Making a Table Row linkable

JaneWDB

Hi - I just joined a new company and I'm currently working with DataTables for a grid solution and it's working fabulously (way more effective than their grid they had before). Truly excellent !

The only problem I'm having is I'm needing to make each row a link to a new page. I've come up with a simple solution which is working great by having a unique ID added to the tag put in there by asp.net which I can then add to the URL to redirect using jquery to append the URL when a user clicks on a row (the 2nd block of jquery in my code below).

The only problem is, when the records paginate, the jquery isn't firing for those records that are on subsequent paginations :/

This is my code snippets:
[code]
$('.data_grid').dataTable({
"sPaginationType": "full_numbers", // sets the pagination
"sDom": 'C<"clear">lfrtip', // activates the ColVis functionality
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], // allows show entries to include ALL
"sScrollX": "100%", // allows internal scrolling
"aaSorting": [[2, "asc"]],
"aoColumnDefs": [ // enables turning off sorting for the columns
{"bSortable": false, "aTargets": [0, 1]} //targets grid columns to disable the column sorting feature - just add the column to be disabled into the array
]
});

// wire up the ID in the data_grid table row and append to the URL to link to the form
$('.data_grid tbody tr').click(function() {
var redirection = $(this).attr('id');
document.location.href = "EditFormDashboard.aspx?FormId=" + redirection;
});

//display hand cursor on hover to let User know it's a clickable link
$('.data_grid tbody tr').hover(function() {
$(this).css('cursor', 'pointer');
}, function() {
$(this).css('cursor', 'auto');
});
[/code]

Sorry I can't give a live URL for this as it's just on my hard drive, but if anyone can help suggest something better than my jquery addtions or some ideas to try it'd be a big help.

Jane

Stephan

Use fnRowCallback... something like:
[code]
oTable = $('.data_grid').dataTable({
"sPaginationType": "full_numbers",
...
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$(nRow).click() {
//assuming your redirect id is in aData[0] as invisible column for example
nRow.setAttribute("id",aData[0])
document.location.href = "EditFormDashboard.aspx?FormId=" + aData[0];
},
...
[/code]

i use fnRowCallback to register a menu (jquery.contextMenu.js) on rowclick.

Callback funtions: http://www.datatables.net/usage/callbacks

allan

Hi Jane,

The top FAQ should help with this: http://datatables.net/faqs#events

Allan

JaneWDB

Hi and many thanks to you both for the suggestions - I've had a look at them and tried to applied them but still struggling sadly.

[update]

just noticed a similar post today that you'd suggested a slightly different approach ( using "fnDrawCallback") and it works great !!

[code]
"fnDrawCallback": function(){
$('.data_grid tbody tr').click(function() {
var redirection = $(this).attr('id');
document.location.href = "EditFormDashboard.aspx?FormId=" + redirection;
});

$('.data_grid tbody tr').hover(function() {
$(this).css('cursor', 'pointer');
}, function() {
$(this).css('cursor', 'auto');
});
}
[/code]
Thanks so much for the pointers (and sorry I couldn't quite use them lol) - and have to say also I'm very impressed also with your Visual Event tool Alan - that's incredible !!!

Thank you so much :D

eruiz

Very useful. Thanks for sharing.

Regards

Enrique

zuckerj

I'm looking to make my rows clickable and to call another php page with various parameters delivered via POST variables. I'm currently doing this via a link, per row, in one of the columns that is fired via a javascript.document.submit() function call.

I think the interface would be nicer if the entire row were clickable and linked.

As an aside, for some unknown reason, I'm having an issue with the links in the Datatables where a single link will not function. Usually the last link. All the rest work fine, just the last one. Everything looks fine as far as I can tell, and no real difference between the functioning link and the non-functioning link. Appears to be a result of DataTable processing. Not really sure.

Anyway, the aside is moot if I can get the clickable rows working. Any help VERY appreciated.

Joel Z.

girishmr

[code]

$('#example tbody tr').live('click', function(){
// More code
});

[/code]

Does this not make your entire row clickable??

EDIT: Corrected the missing paranthesis

zuckerj

Yes, that works, thanks!

BUT...

I'm still being bitten by the mysterious stripping of my tags for the first item in my table.

I cannot for the life of me figure out why. It DOES NOT happen all the time. But SOMETIMES the element for the first row is getting stripped between the time the browser gets the source, and DataTables re-rendering the DOM table.

In other words, I check the page source and I see my tag element for the first row in the table. But if I check the "Inspect Element" Chrome tool, I see that the element for that row is now missing.

Weird!

Help.

Jz.

zuckerj

Actually, this is resulting in making EVERY ROW link to the form associated with my first row.

Implemented as such:

[code]
$(document).ready(function() {
$('#student_summary').dataTable( {
"bAutoWidth": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [[10,25,50,100,-1], [10,25,50,100,"All"]],
"iDisplayLength": -1,
"aoColumnDefs": [
{ "aTargets":[0], "bSearchable": false, "bVisible": false },
{ "aTargets":[1], "sType": "string" }
],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('#student_summary tbody tr').live('click', function(){
f = document.getElementById( 'student_summary_' + aData[0] );
if(f)
{
f.submit();
}
});
}
} )
} );
[/code]

Also, would be remiss not to point out that you were missing a parenthesis after function for anyone who might want to give this a try.

Jz.