Jquery - Add hyperlink to datatables

Question

Using the DataTable plugin I am able to generate a table just fine but I want a custom hyperlink on one of the columns that links to another page but taking information from the rest of the row...for example in row 1 I want a hyperlink: http://url/?data['imdata'][i]['faultInst']["attributes"]["code"] or something like that. I've seen a lot of complicated examples from other forms but couldn't get it to work. Looking for the simplest solution as this is a side project and I need it to be completed.

$(document).ready(function(){

        $.getJSON('/static/faults.json', function (data) {

            var test = $('#table5').DataTable({
            });

            var tr;
            for (var i = 0; i < data["totalCount"]; i++) {
              test.row.add([
                  data['imdata'][i]['faultInst']["attributes"]["code"],
                  data['imdata'][i]['faultInst']["attributes"]["cause"],
                  data['imdata'][i]['faultInst']["attributes"]["descr"],
                  data['imdata'][i]['faultInst']["attributes"]["created"],
                  data['imdata'][i]['faultInst']["attributes"]["changeSet"],
                  data['imdata'][i]['faultInst']["attributes"]["childAction"],
                  data['imdata'][i]['faultInst']["attributes"]["dn"],
                  data['imdata'][i]['faultInst']["attributes"]["domain"],
                  data['imdata'][i]['faultInst']["attributes"]["highestSeverity"],
                  data['imdata'][i]['faultInst']["attributes"]["lastTransition"],
                  data['imdata'][i]['faultInst']["attributes"]["lc"],
                  data['imdata'][i]['faultInst']["attributes"]["occur"],
                  data['imdata'][i]['faultInst']["attributes"]["origSeverity"],
                  data['imdata'][i]['faultInst']["attributes"]["prevSeverity"],
                  data['imdata'][i]['faultInst']["attributes"]["rule"],
                  "test",
                  //data['imdata'][i]['faultInst']["attributes"]["Severity"],
                  data['imdata'][i]['faultInst']["attributes"]["subject"],
                  data['imdata'][i]['faultInst']["attributes"]["type"],
                  //data['imdata'][i]['faultInst']['attributes']["ack"]
                  "test",
                  "test"
              ])
            }

            test.draw();
        });
    });

I can't tell from reading the code what result you're getting. Do you see the correct text in the cell? If so, is the text a hyperlink? (Can't see how there is) and the link does not load correctly or does not work at all? — Karl
– Karl, Commented Dec 1, 2015 at 16:33
This is the code for just the table and pulling the info from a json file. I want to know how to add a hyperlink to one of the columns. — user3210458
– user3210458, Commented Dec 1, 2015 at 16:39
To be clear there is no code that adds a hyperlink...that's what i'm looking for as every solution I've seen doesn't work for my case. here is something that turn the column into a bunch of download links but I can't get it to work for me. datatables.net/reference/option/columns.render $('#example').dataTable( { "columnDefs": [ { "targets": 0, "data": "download_link", "render": function ( data, type, full, meta ) { return '<a href="'+data+'">Download</a>'; } } ] } ); — user3210458
– user3210458, Commented Dec 1, 2015 at 16:41
I think render isn't working because you're not using the datatables API to populate your table. Can you not simply construct a link in the for loop? — markpsmith
– markpsmith, Commented Dec 1, 2015 at 17:16

davidkonrad · Accepted Answer · 2015-12-01 18:28:53Z

5

When you have a setup like this, just avoid to define data, by that you get the proper value you can turn into a link. dataTables know which data it should pass to the render function by the targets value. Example :

var table = $('#example').DataTable({
    columnDefs : [
      { targets : [0],
        render : function(data) {
          return '<a href="'+data+'" target_blank>'+data+'</a>'
        } 
      }
    ]
})  

table.row.add(['https://example.com', 'david', 'programmer']).draw()

demo -> http://jsfiddle.net/47k7nhkb/

answered Dec 1, 2015 at 18:28

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

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

1 Comment

user3210458 Over a year ago

UGH THIS IS SO SIMPLE! I feel dumb...Thanks a lot!

Collectives™ on Stack Overflow

Jquery - Add hyperlink to datatables

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related