How to display pre-existing hyperlink column data

curiou

I have a column that already contains a hyperlink (e.g. <a href="...">...</a>) in each row but datatables displays the column cells as plain text rather than clickable hyperlinks. The only hyperlink examples I've found use a data source to render a hyperlink, but what do you do to properly display a pre-existing hyperlink in a cell?

Thanks

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

curiou

Hi Colin,

I am having issues recreating this with a test case. In a test case whenever I put a hyperlink into the cell, it displays as expected (i.e. as a clickable hyperlink). See the hyperlink in the first cell of this test case for example: http://live.datatables.net/dulonela/1/edit

However, on my own table, the column containing the hyperlinks is pre-rendered HTML via the server but the table cells are displayed as plain text rather than clickable hyperlinks. I do not have any special render functions that might be messing up the column type or anything of that nature. Is there anything I can do with columns.render() to prod the column into displaying properly (though the pre-rendered HTML should technically display properly...)?

Thanks

colin

Could you give an example please of what the server sends back? Is it just a URL, or the entire "<a href...>?

Colin"

curiou

The HTML table column already contains the full "<a href...>" once DataTables is initialised

Thanks

kthorngren

Without seeing the problem its hard to offer suggestions. Can you update the test case to show how the link is rendered in your HTML? Use the browser's inspector to see what it looks like.

Or you can use columns.render and in the function use console.log( data ); or the browser's debugger to see what the data looks like. Hopefully this will give you the information need to solve your problem.

Kevin

curiou

Is this the correct syntax logging the data:

columnDefs: [
   {"render": function(data, type) {console.log(data);},  "targets": [3] }
]

Asking because this currently does nothing in the console.

kthorngren

You always need to return the data or something for the cell. Not sure why it displays nothing. I updated your example to show how:
http://live.datatables.net/dulonela/3/edit

Note it uses an if statement to output for the display type. Otherwise you will see the output 4 times on initialization. Note also the use of both return statements.

Kevin

curiou

Got it to work. This is what console.log(data) outputs for each row:

"<a href="mailto:Blackwell@email.com">Blackwell, Alicia</a>"

curiou

Strange, when I copy paste the statement, it doesn't show all the extra characters that are coming out. Such as: "<"

curiou

Ah got it those were the characters that make up the HTML brackets... Anyway, the console.log(data) shows the <td> tags contain valid hyperlinks (i.e. "<a href="link">Something</a>") but it's not being rendered as a hyperlink. I'm really at a loss here because I can't replicate this in a test case...

curiou

It's definitely something my backend code is doing when inserting the data (not a DataTables issue). We can mark this as closed. Thanks

colin

Yep, it's working fine here (using data rather that ajax but the principle would be the same) - so something on your end I'm afraid,

Colin