Search code examples
jquerydatatablesdatatables-1.10

make column data as hyperlink (dataTable JQUERY)


I am trying to make a column as hyperlink with datatable but no success.

function successCallback(responseObj){

  $(document).ready(function() {
         $('#example').dataTable( {
        "data":responseObj ,
        "bDestroy": true,
        "deferRender": true ,
        "columns": [
                    { "data": "infomation" },
                    { "data": "weblink" },
                ]
  } );

  } );

}

I need the weblink to display the link and be an hyperlink in that column so users can click and be redirected to another page. I looked into render but with less information there on links, i can't succeed to do it.

I also looked into this example but it wasn't very helpful.


Solution

  • Use columns.render API method to dynamically produce content for a cell.

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

    See this example for code and demonstration.