Add link to Ajax sourced data in jQuery Datatables

Question

I want to add a link/href to the 2nd column (the one with "C" data in it). I have tried the columns render function but it only has data of the current column.

https://datatables.net/reference/option/columns.render

I want to use data from different columns onto anchor tag of column 2

this guy here

https://stackoverflow.com/a/47696609/11575565

explains using rowID which would've solved my problem but this isnt working.

I tried using $.getJSON and append() over ajax function but it doesnt work as well.

    $(document).ready(function() {
  var table = $('#bla').DataTable({
    "ajax" : "blist.json",
    "columns" : [
        { "data" : null,defaultContent: "-" },
        { "data" : "C" },
        { "data" : "B" },
        { "data" : "D" },
        { "data" : null,defaultContent: "-" },
        { "data" : null,defaultContent: "-" },
    ],

[the array in blist.json has data "A","B","C","D","E"]

`render( data, type, row, meta )` ...`row` holds all column values ... — davidkonrad, Sep 07 '19 at 09:14

score 4 · Accepted Answer · answered Sep 07 '19 at 11:05

Say, your Link value is in key E then, you would be able to use render as shown below.

"columns" : [
  { "data" : null,defaultContent: "-" },
  { "data" : "C", 
    "render": function(data, type, row, meta){
      if(type === 'display'){
          data = '<a href="' + row.E + '">' + data + '</a>';
      }
      return data;
    }
  },
  { "data" : "B" },
  { "data" : "D" },
  { "data" : null,defaultContent: "-" },
  { "data" : null,defaultContent: "-" },
]

Add link to Ajax sourced data in jQuery Datatables

1 Answers1