javascript - Jquery - Add hyperlink to datatables - Stack Overflow

admin管理员组

文章数量:1417662

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 plicated 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 pleted.

$(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();
        });
    });

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 plicated 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 pleted.

$(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();
        });
    });

• javascript
• jquery
• hyperlink
• datatables

Share Improve this question Follow asked Dec 1, 2015 at 16:16 user3210458user3210458 3311 silver badge88 bronze badges 4

• 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 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 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/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 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 Commented Dec 1, 2015 at 17:16

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.', 'david', 'programmer']).draw()

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

本文标签： javascriptJqueryAdd hyperlink to datatablesStack Overflow