31

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.

Community
  • 1
  • 1
Undisputed007
  • 639
  • 1
  • 10
  • 31

4 Answers4

76

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.

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
  • 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. – Trm Dec 24 '16 at 13:51
  • 1
    @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. – Gyrocode.com Dec 24 '16 at 18:16
  • 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](https://datatables.net/forums/discussion/39633/how-to-set-same-hyperlink-for-multiple-columns#latest) – Trm Dec 24 '16 at 19:45
  • @Trm, as I said earlier, use `full['name']` instead of `data`. – Gyrocode.com Dec 25 '16 at 04:24
  • 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? – twan Aug 23 '18 at 13:02
  • doesn't work in angular 2 and up. The (click) binding will be lost if using columns.render – Silent Sojourner Mar 28 '20 at 18:29
  • @SilentSojourner, use event delegation when attaching click event handlers, please see [this article](https://www.gyrocode.com/articles/jquery-datatables-why-click-event-handler-does-not-work/). – Gyrocode.com Mar 28 '20 at 19:57
20

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.

Adarsh Madrecha
  • 6,364
  • 11
  • 69
  • 117
  • 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! – Jon Jun 19 '18 at 22:57
  • 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: https://datatables.net/reference/option/rowId – Adarsh Madrecha Jun 20 '18 at 05:30
  • 1
    I ended up assembling the url like so `data = '' + data + '';` – Jon Jun 20 '18 at 05:48
  • 1
    this answer save my day even its old – Mathew Magante Aug 09 '20 at 03:11
9
    $('#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

ozz
  • 5,098
  • 1
  • 50
  • 73
  • 1
    Do you know if there is a workaround if I have `"targets": [0,1]`, they both would use data from first column (target 0)? – Trm Dec 24 '16 at 14:00
  • 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 – ozz Dec 26 '16 at 22:29
  • 1
    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. – Trm Jan 05 '17 at 15:36
1

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;
}
tastytim
  • 141
  • 1
  • 3