I want to create links in record fields in DataTables from JSON data

Question

I'm creating a dataTables table to use as an archive of pages for a site that produces a comic strip. On that archives page, I'd like to have the title of the comic be a link to the page of that comic strip.

Initialization:

    <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
            $('#example').dataTable( {
            "bProcessing": true,
            "sAjaxSource": "archive/archive.txt"
    } ); 
} );

        </script>

HTML:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th width="20%">Author</th>

            <th width="25%">Title</th>
            <th width="25%">Episode</th>
            <th width="15%">Date</th>
            <th width="15%">Tags</th>
        </tr>
    </thead>
    <tbody>


    </tbody>

</table>

JSON Data:

{ "aaData": [
    ["Bob","Title One","Episode 1","9/30/2010","tag1,tag2,tag3"],
    ["Bob","Title One","Episode 2","10/2/2010","tag1,tag2,tag3"],
    ["Bob","Title One","Episode 3","10/4/2010","tag1,tag2,tag3"],
    ["Bob","Title Four","Episode 1","10/8/2010","tag1,tag2,tag3"],
    ["Bob","Title Five","Episode 1","10/11/2010","tag1,tag2,tag3"],
    ["Bob","Title Six","Episode 1","10/12/2010","tag1,tag2,tag3"],
    ["Kevin","Title Seven","Episode 1","10/15/2010","tag1,tag2,tag3"],
    ["Kevin","Title Eight","Episode 1","10/17/2010","tag1,tag2,tag3"],
    ["Kevin","Title Eight","Episode 2","10/20/2010","tag1,tag2,tag3"],
    ["Kevin","Title Ten","Episode 1","10/22/2010","tag1,tag2,tag3"],
    ["Kevin","Title Eleven","Episode 1","10/23/2010","tag1,tag2,tag3"],
    ["Kevin","Title Twelve","Episode 1","10/24/2010","tag1,tag2,tag3"]
] }

Where "Title One" or "Title Four" etc, would be a link to the page of that comic. Admittedly, I don't have much in the way of chops with dataTables, so if you might be explicit in your solution, that would be well appreciated.

Answer 1

You could also use the mRender function with aoColumnDefs:

$('#example').dataTable({
  "bProcessing": true,
  "bServerSide": true,
  "sAjaxSource": "archive/archive.txt",
  "aoColumnDefs": [            
     {
       "aTargets": [ 2 ], // Column to target
       "mRender": function ( data, type, full ) {
         // 'full' is the row's data object, and 'data' is this column's data
         // e.g. 'full[0]' is the comic id, and 'data' is the comic title
         return '<a href="/comics/' + full[0] + '">' + data + '</a>';
       }
     }
   ]
});

This is more explicit and likely more maintainable because you can specify how individual columns render at the column level, rather than selecting them through the DOM at the row level, which helps when you're adding columns later on.

Answer 2

you should use fnRowCallback option see documentation.

$('#example').dataTable({
     "bProcessing": true,
     "bServerSide": true,
     "sAjaxSource": "archive/archive.txt",
     "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            $('td:eq(2)', nRow).html('<a href="view.php?comic=' + aData[2] + '">' +
                aData[2] + '</a>');
            return nRow;
        },
});

Answer 3

$('#example').dataTable({
     "bProcessing": true,
     "bServerSide": true,
     "sAjaxSource": "archive/archive.txt"
     "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            $('td:eq(2)', nRow).html('<a href="view.php?comic=' + aData[2] + '">' +
                aData[2] + '</a>');
            return nRow;
        },
});

Answer 4

If using the latest version v1.10.16 can use render function callback.

$('#example').dataTable({
   "data": responseObj,
   "columns": [
      { "data": "information" }, 
      { 
         "data": "weblink",
         "render": function(data, type, row, meta){
            if(type === 'display'){
                data = '<a href="' + row.myid + '">' + data + '</a>';
            }
            return data;
         }
      } 
   ]
});

I have just changed the render function. data refers to only current column data, while row object refers to entire row of data. Hence we can use this to get any other data for that row.

If you wnat to link based on the value of current column, can use

if(type === 'display'){
    data = '<a href="' + data + '">' + data + '</a>';
}