make column data as hyperlink (dataTable JQUERY)

Question

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.

Personification

Answer 1

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.

Crunch

What if I also want to make First Column(A1-A4) clickable that would use same link? I have a problem when I want multiple columns clickable, but use same source for href. Hope it makes sense. – Melinite

@Trm, you can define the same columns.render function for the rest of the columns, instead of data use row['weblink']. Or you could use columnDefs.render and define render function once and target all required columns using columnDefs.targets option. – Crunch

I tried using columnsDefs, maybe I'm missing something, but problem was that different Data was rendered for each column. Here's how my code looks – Melinite

@Trm, as I said earlier, use full['name'] instead of data. – Crunch

What if I don't have data from an object? What if I just loop with PHP and want anchor tags around the looped data? – Pedo

doesn't work in angular 2 and up. The (click) binding will be lost if using columns.render – Parlour

@SilentSojourner, use event delegation when attaching click event handlers, please see this article. – Crunch

Answer 2

If you are looking to add link based on other column data then can use the below approach.

$('#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.

Steinke

How do you work the row selector row.myid? The data I provide Ajax has string columns for the cell content and int columns which aren't used to render the cell, but ideally I could use to assemble the link. This is exactly what I am trying to do! – Helsie

I am using rowId: "taskno" (rowId Option) to set id property in HTML for tr tag then use row.myid to refer/get this. Ref: datatables.net/reference/option/rowId – Steinke

I ended up assembling the url like so data = '<a href="/url/' + row['col2'] + '">' + data + '</a>'; – Helsie

this answer save my day even its old – Cartulary

Answer 3

    $('#example').dataTable( {
  "columnDefs": [ {
    "targets": 0,
    "data": "download_link",
    "render": function ( data, type, full, meta ) {
      return '<a href="'+data+'">Download</a>';
    }
  } ]
} );

From the documentation. It is quite clear and straightforward to me, what is it specifically that you do do not understand? What errors do you see?

For a more complete example, see here

Ballroom

Do you know if there is a workaround if I have "targets": [0,1], they both would use data from first column (target 0)? – Melinite

see the documentation link in my answer. the third param is the row data (not sure why in my example I have called the variable "full" but it is an array with all data from the row – Ballroom

God bless you man. Documentation code samples also says "full", so that's why I guess you called it. I used full.column_name to get the data. I've read documentation multi times, but wording never clicked me that it returns full row data. – Melinite

Answer 4

in my example I make the column cell fully clickable and not just the text inside the column. I think it will be useful for someone. use bootsrap 5

  $(document).ready(function() {
  $('#datatable').DataTable({
      processing: true,
      serverSide: true,
      ajax: '{!! route('get.profiles') !!}',
      columns: [
          {
              data: 'id',
              name: 'id',
              render : function(data, type, row, meta) {return'<a class=" d-inline-block fw-normal w-100 h-100 pe-auto" href="profiles/edit/' + row.id + '">' + row.id + '</a>';},
          },

          {
              data: 'name',
              name: 'name',
              render : function(data, type, row, meta) {return'<a class="d-inline-block fw-normal w-100 h-100 pe-auto" href="profiles/edit/' + row.id + '">' + row.name + '</a>';},
          },
      ]
  });
});

in your css file add

td{
height: 100%;
overflow: visible;
}

Morganatic