href link in datatable 'server side'

mikeddd123

Hello all, im a so happy to come across this plugin, it has done wonders for me so far, but i would like some help in just one area.

I would like to know how can a place a href link in my table which fetches data from mysql database.

The like itself is stored and fetched from the database but its not displaying as a click-able hyperlink in the table.

I would like the link be fetched and displayed as; for example:
CLICK ME
[code]CLICK ME[/code]

Thanks in advance!

allan

How are you generating the data for the table at the moment? Is it just going into an HTML page which DataTables will then read form the DOM? If so, just create the A tag like you would normally - i.e. echo '... or something along those lines.

Allan

mikeddd123

Thanks allan, but where do i put this code?
In the processing.php or in the index.php (table displaying page)?

Thanks once more!

GregP

Hi Mike,

Allan is suggesting that you put it into the processing.php. I have done this in the past and it works great.

However, we had a requirement to separate the returned data from anything presentational (our application on the server-side was required to not intercept the data object for such modificiations, but to send it along as an unaltered JSON representation of the database request).

What I ended up doing was having the link stored in the database and returned in a separate column from my "click here" text (one database column for "Click Here" equivalent, and one column for the link). I used DataTables to hide the link column from view, and used some JavaScript (inside the DataTables fnRowCallback) to then make the "click here" column clickable.

My application's code is a bit heavy to just copy and paste, but if you think you're interested in storing the link separately, I could do some work to excerpt the appropriate code for you. That said, there's nothing wrong with appending the appropriate HTML with PHP either.

Cheers,
Greg

mikeddd123

Thanks for your reply Greg, your idea sounds great.
If you can excerpt the appropriate code that would be great!
Thanks in advance!

GregP

Here's how I did it. Note that this is part of the fnRowCallback, which in turn is part of the dataTable() initialization, so make sure it ends up in the right place. If anyone else sees this and figures "There's a better way!" I'm all ears!

I tried my best to excerpt this, but I have to admit I didn't field-test the code.What I do here is instead of adding an anchor tag, I make the TD element itself clickable. In my example, I'm using that click to open a new window to the desired URL. In your application, you might want click to do something different. Not sure what your comfort level is with jQuery, but if you're not sure how to proceed, let me know what it's meant to do and I'll try to help. If your requirement is simply to open the resource in the same window, change the window.open line (line 8)to:
[code]
window.location.href = myLink;
[/code]
..and I'm pretty sure it'll work (again, not field-tested).

If your requirement is to actually have an anchor tag, that should be easily done, too. Instead of .addClass and .click functions, you would use one of the many jQuery string concatenation functions to modify that TD before returning nRow. I can help out if you need. Here's the code to be added to your dataTable() initialization:
[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {

var myLink = aData[2]; // The column in the DATA object with the URL. Change as needed.

if (myLink.length > 0) {
/* eq(0) defines the VISIBLE column that will be clickable. Change this as needed, or make it into a reusable variable */
$('td:eq(0)', nRow).addClass('clickable').click(function() {
window.open(myLink,'Configuration Window','width=1000,height=700');
return false;
});
}

return nRow;
}
[/code]
I think the "return false" is an artifact from when I *DID* use an anchor tag; it might not be needed but I left it there anyhow.

And the CSS for "clickable":
[code]
.clickable { cursor: pointer;}
td.clickable:hover {text-decoration: underline !important; }
[/code]
(note: I'm not actually a fan of !important. If you can avoid it, all the better. I can't remember anymore why I just gave up and used it)