DataTables rendering custom column

Ashiv3r picture Ashiv3r · Jan 27, 2017 · Viewed 9.2k times · Source

Is it possible to render custom column in DataTables.net? I've read a lot of tutorials and documentations, but cannot make it working. I would like to create thirds column with link where I use information from first column. My code looks like these:

$(document).ready(function () {
    $('#categories').DataTable({
        "ajax": '@Url.Action("Table", "Categories")',
        "columns": [
            { "data": "Name" },
            { "data": "Parent" },
            null
        ],
        "columnsDefs": [
            {
                "render": function(data){
                    return "<a href='~/Admin/Categories/Edit' + data.Name + '>EDIT</a>";
                },
                "targets": 0
            }
        ]
    });
});

In json I'm only getting Name and Parent column informations. Any ideas to create third column with Name inside it? Thanks!

Answer

Ashiv3r picture Ashiv3r · Jan 28, 2017

Okay, so I've managed to do it by myself. Here is the answer for next generations:

 $(document).ready(function () {
    $('#categories').dataTable({
        "ajax": '@Url.Action("Table", "Categories")',
        "aoColumns": [
            { "data": "Name" },
            { "data": "Parent" },
            {
                "mData": "Name",
                "mRender": function (data, type, row) {
                    return "<a href='Admin/Categories/Edit/" + data + "'>EDIT</a>";
                }
            }
        ]
    });
});