Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DataTables rendering custom column

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!

like image 357
Ashiv3r Avatar asked Jan 27 '17 18:01

Ashiv3r


People also ask

What is column render?

Each column has an optional rendering control called columns. render which can be used to process the content of each cell before the data is used. columns.

What is the use of ColumnDefs in Datatable?

ColumnDefs option allows you to assign specific options to columns in the table.

What is Rowcallback in Datatable?

This callback allows you to 'post process' each row after it have been generated for each table draw, but before it is rendered into the document. This means that the contents of the row might not have dimensions ( $(). width() for example) if it is not already in the document.

What are ColumnDefs targets?

targets option provides the information required by DataTables for which columns in the table the column definition object should be applied. It can be: 0 or a positive integer - column index counting from the left. A negative integer - column index counting from the right.


1 Answers

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>";
                }
            }
        ]
    });
});
like image 183
Ashiv3r Avatar answered Oct 05 '22 18:10

Ashiv3r