How to display a hyperlink in a cell using jQuery DataTables

Question

I have Ajax data that is read in jQuery DataTables. The problem is that I need to make the data in the first column a hyperlink. Like in <td><a href = "5555.html">5555</a></td> .

My JSON details:

 { "data": [ ["5555","07/17/2010","RCC Saturday Open","E10","Harris, Fred","1900","Nikolayev, Igor (FM)","2367","1-0"], ["5554","07/17/2010","RCC Saturday Open","B01","Nikolayev, Igor (FM)","2367","Motroni, Richard","1728","1-0"] ] } 

JavaScript:

 $(document).ready(function() { $('#cccr').DataTable( { "render": function ( data, type, row ) { return '<a href="basic.php?game=' + data + '></a>'; //doesn't work }, "ajax": 'games.json', "deferRender": true } ); } ); 

I don't know much about JavaScript. I could not figure it out after several hours of working with the datatables.net website.

Can anybody help?

Answer 1

CAUSE

The render option should be a sub-property of either columns or columnDefs .

DECISION

Use columnDefs.render to dynamically display a hyperlink in a cell.

For instance:

 var table = $('#cccr').DataTable({ /* ... skipepd other options ... */ columnDefs: [ { targets: 0, render: function ( data, type, row, meta ) { if(type === 'display'){ data = '<a href="basic.php?game=' + encodeURIComponent(data) + '">' + data + '</a>'; } return data; } } ] }); 

Demo

See this jsFiddle for code and demos.

Answer 2

customize the column definitions with the render option :

 "render": function ( data, type, row ) { return '<a href="#">' + data + '</a>'; }