How to display a hyperlink in a cell with jQuery DataTables

Question

I have some Ajax data read into jQuery DataTables. Problem is I need to make the data in the first column into a hyperlink. As in <td><a href = "5555.html">5555</a></td>.

My JSON data:

{
   "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'm not too knowledgeable about JavaScript. I was unable to figure it out after hours of googling the datatables.net website.

Can anyone please help ?

Gyrocode.com · Accepted Answer · 2016-10-06 11:56:59Z

20

CAUSE

Option render should be sub-property of either columns or columnDefs.

SOLUTION

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

For example:

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 demonstration.

edited Oct 6, 2016 at 11:56

answered Sep 25, 2015 at 14:10

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

verlager Over a year ago

Thank you! But the jsFiddle example uses inline JSON data. I have an external JSON file of 600 records. Instead of var data = [["5555","07/17/2010",etc. I need to reference an external file.

Gyrocode.com Over a year ago

@verlager, I just used inline JSON for demonstration. You can use external JSON if you want by using ajax option.

verlager Over a year ago

The problem is the code creates an issue where the 3rd column (date) butts up against the 2nd column on a laptop display of 1280 x 768. This may be a dataTables problem. But unless this gets fixed my web mastering days are over.

Gyrocode.com Over a year ago

@verlager, not sure how this is related to your original question.

Roy Ling · Accepted Answer · 2015-09-25 09:51:28Z

-1

configure the column definitions via render option:

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

answered Sep 25, 2015 at 9:51

Roy Ling

1,6521 gold badge17 silver badges32 bronze badges

1 Comment

verlager Over a year ago

Yes, but how do I put that in? What do I put in for data, row, and type? I looked at datatables.net/reference/option/columns.render but it makes little sense to me. Can you please supply exactly what I need to do?

Collectives™ on Stack Overflow

How to display a hyperlink in a cell with jQuery DataTables

2 Answers 2

CAUSE

SOLUTION

DEMO

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

CAUSE

SOLUTION

DEMO

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related