Javascript Datatables generating HTML link using render function on JSON data

Question

I got a html table:

<table id="dattable"  class="table table-striped table-bordered hover" cellspacing="0" >
    <thead>
        <tr>
            <th>Name</th>
            <th>Industry</th>
            <th>Cost</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

and it is populated by JSON data. I want to use the render function to make items in the name column have a HTML link using the id field but it is not working.

var data2 =[
    {
        "id": "0",
        "name":       "Jack Spicer",
        "industry__name":   "System Architect",
        "cost":     "$3,120",
    },
    {
        "id":"1",
        "name":       "Sean Spice",
        "industry__name":   "Motormouth",
        "cost":     "-$5,300",
    }
];

$(document).ready(function() {
    var table = $('#dattable').DataTable( {
        data: data,
        columns: [
            { data: 'name', "render": "<a href =" + [, ].id +">"+[, ].name+"</a>"},  //render function
            { data: 'industry__name' },
            { data: 'cost' }
        ],


    } );
} );

rolspace · Accepted Answer · 2017-05-18 23:27:49Z

1

Based on your code, I think you need to change the definition of the column that generates the custom text you want. Also, I modified the call to render to use the function version.

var data2 = [{
    "id": "0",
    "name": "Jack Spicer",
    "industry__name": "System Architect",
    "cost": "$3,120",
}, {
    "id": "1",
    "name": "Sean Spice",
    "industry__name": "Motormouth",
    "cost": "-$5,300",
}];

$(document).ready(function() {
    var table = $('#dattable').DataTable({
        data: data2,
        columns: [{
          'data': null,
          'render': function(data, type, row, meta) {
            return '<a href=' + data.id + '>' + data.name + '</a>';
          }
        }, {
          data: 'industry__name'
        }, {
          data: 'cost'
        }]
    });
});

You can take a lot at this as well, to see the changes I applied: https://jsfiddle.net/dr3hcd9j/

answered May 18, 2017 at 23:27

rolspace

3351 gold badge5 silver badges11 bronze badges

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

1 Comment

rolspace Over a year ago

I agree, happy to help.

Collectives™ on Stack Overflow

Javascript Datatables generating HTML link using render function on JSON data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related