Using DataTables to output column with a link

neojiphre

Hi, I'm using DataTables to list products on sale on my website (I have about 1000 products to list). I am using it with server-side processing and it works with no problems after I enter the details of my table in my script. Here is my site: http://neoshop.xtreemhost.com/shop/search.php

Now I'm wondering if there is any way to have one column be formatted in a way like this:
The Name of the Product

where:
<?php

$url = index.php?p=ProductId;
?>
and ProductId is the column on the very left.
Any help please? Thanks in advance.

GregP

If I'm understanding correctly, you already have all the tools you need. ProductId is already there for the taking, as is a product name. Now you just want to make the product name clickable with a link to what I presume is a product description or somesuch?

in fnRowCallback, you can grab the id via aData[0], and you can "rewrite" nRow so that there is an anchor link in the Product name column. Concatenate the id into the right place in a new string, and you're done.

I can probably come up with some sample code for you if that's not enough to go by. Be sure to check out the fnRowCallback documentation to see how it could be done, though-- if you read up on that function, you'll beat me to it. ;-)

neojiphre

I kinda get what you're saying, and thanks for looking at my problem. My code is below and it doesn't load the table:

[code]$(document).ready(function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
{
$('td:eq(1)', nRow).html( 'aData(1)' );
}
}
} );
} );[/code]

How do I concatenate aData properly?

GregP

I think you're nesting into an extra set of curly braces that isn't needed. That aside, you need square rather than round braces for the aData aray: aData[0]. To concatenate in JavaScript, you need to close your static string's quotation marks temporarily and use + to add in the variable and then reopen your quotation marks to continue along. Also, you're simply missing a few quotation marks (href="foo").

As far as I can see, this should work (but I admit I haven't tested it):

[code]
$(document).ready(function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$('td:eq(1)', nRow).html( ''+aData[1]+'' );
return nRow;
}
} );
} );
[/code]

neojiphre

Thanks for the code man. Unfortunately it spits out an error:
A node was not returned by fnRowCallback

neojiphre

Ah don't worry. Just had to add
return nRow;
below the code that modifies the row.

Thanks a lot for your help!

GregP

Sorry, my bad! I knew you had to return nRow; not sure how I left that out. Good eye! Updated my sample.