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

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 Eig开发者_如何学Pythonht","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.

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.

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;
        },
});

$('#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;
        },
});

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>';
}

Below, is what I did to get altered html text in column cell, given a certain value in the aaData object array. This works, but feels horrible because html markup is in the javascript as above.

var dataTableMeta = { "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": url
                                , "aoColumns": aoColumns
                                , "fnServerData": function (sSource, aoData, fnCallback) {
                                    $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData, "success": fnCallback,
                                        'dataFilter': function (data, type) {
                                            var jsObject = jQuery.parseJSON(data);
                                            for (var i = 0; i < jsObject.aaData.length; i++) {
                                                jsObject.aaData[i].CaseID = '<a href="" >' + jsObject.aaData[i].CaseID + '</a>';
                                            }
                                            var jsonString = JSON.stringify(jsObject);
                                            return jsonString;
                                        }
                                    });
                                }
        };

        $('#caseSearchTable').dataTable(dataTableMeta);

I could not get any of the answers to accomplish what I was trying to do.

I wanted to show the DisplayedColumn in the datatable column, but have the ID sent with the request when clicked. I also did not want to display the ID column.

Here is how I achieved this:

columns: [
  { "data": "ID", "visible" : false },
  { "data": "DisplayedColumn" },
...
columnDefs: [ {
  targets: [1],
  "render": function (data, type, row, meta) {
     return '<a href="/Area/Controller/Action/' + row.ID + '">' + data + '</a>';
   }
}
...

This was, sadly, very hard to find an answer that worked for me, I hope it helps someone.