jQuery Datatable make each cell a link

Question

I have four entities, let's say A,B,C,D which are interconnected (B depends on A, C depends on B, D depends on C). I want to display all the information in one table that can be easily searched and filtered.

So I created a view model of form:

public class MyViewModel {
    public Aname {get; set;}
    public Alink {get; set;}
    public Bname {get; set;}
    public Blink {get; set;}
    public Cname {get; set;}
    public Dname {get; set;}
    public Dlink {get; set;}
}

I want the table to have four columns to display the name of each entity and each data in a cell to be a hyperlink that leads to the details page of the selected entity (except entity C).

Here is the javascript

$('#myDataTable').DataTable({
    'bDestroy': true,
    "bInfo": true,
    "bProcessing": true,
    "bDeferRender": true,
    'iDisplayLength': 10,
    'sPaginationType': 'full_numbers',
    'sPageButtonActive': "paginate_active",
    'sPageButtonStaticDisabled': "paginate_button",
    'data': OptionsHandler.Data,
    "columnDefs": [
        {
            "render": function (data, type, row) {
                return "<a href=" + row[1] + "'>" + row[0] + "</a>";
            },
        },
    ]
});

But it complains that

Requested unknown parameter 0 for row 0. For more information about this error, please see http://datatables.net/tn/4

Data is in Json format:

data = [
       {"Aname":"PatriceBoyle",
        "Alink":"/A/Details/00014",
        "Bname":"Software Engineering",
        "Blink":"/B/Details/2",
        "Cname":"info",
        "Dname":"Database Design",
        "Dlink":"/D/Details/1"
       }, etc.]

How can I say: return "<a href=" + link + "'>" + name + "</a>"; for each cell?

Answer 1

row[1] implies either an array index or object property name of '1' but you have neither.

You need something like:

return "<a href=" + row.Alink + "'>" + row.Aname + "</a>";

Answer 2

I stripped your code down to the minimum and got the same error until I changed you columndefs to columns instead:

columns: [
            { title: "Aname", data: "Aname", render: function (data, type, row) { return "<a href=" + row[1] + "'>" + row[0] + "</a>"; } },
            { title: "Alink", data: "Alink", render: function (data, type, row) { return "<a href=" + row[1] + "'>" + row[1] + "</a>"; } },
            { title: "Bname", data: "Bname", render: function (data, type, row) { return "<a href=" + row[1] + "'>" + row[2] + "</a>"; } },
            { title: "Blink", data: "Blink", render: function (data, type, row) { return "<a href=" + row[1] + "'>" + row[3] + "</a>"; } },
            { title: "Cname", data: "Cname", render: function (data, type, row) { return "<a href=" + row[1] + "'>" + row[4] + "</a>"; } },
            { title: "Dname", data: "Dname", render: function (data, type, row) { return "<a href=" + row[1] + "'>" + row[5] + "</a>"; } },
            { title: "Dlink", data: "Dlink", render: function (data, type, row) { return "<a href=" + row[1] + "'>" + row[6] + "</a>"; } }
        ]

Answer 3

I managed to do it combining the two answers:

columns: [
        { title: "Column A", data: "Aname", render: function (data, type, row) { return "<a href=" + row.Alink + "'>" + row.Aname + "</a>"; } },
        { title: "Column B", data: "Bname", render: function (data, type, row) { return "<a href=" + row.Blink + "'>" + row.Bname + "</a>"; } },
        { title: "Column C", data: "Cname", render: function (data, type, row) { return "<a href=" + row.Clink + "'>" + row.Cname + "</a>"; } },
        { title: "Column D", data: "Dname", render: function (data, type, row) { return "<a href=" + row.Dlink + "'>" + row.Dname + "</a>"; } },
    ]