32

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.

Improve this question

4 Answers 4

Reset to default
78

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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, 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.
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
@Trm, as I said earlier, use full['name'] instead of data.
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?
|
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.

Improve this answer

4 Comments

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!
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
I ended up assembling the url like so data = '<a href="/url/' + row['col2'] + '">' + data + '</a>';
this answer save my day even its old
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

Improve this answer

3 Comments

Do you know if there is a workaround if I have "targets": [0,1], they both would use data from first column (target 0)?
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
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.
2

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;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.