Jquery Datatables with MVC custom column

Question

I've searched a lot on the internet but I can't find a way to do this. I'm using Jquery datatables:

var oTable = $('#boardTable2').DataTable({
            "ajax": {
                "url": '/Boards/GetBoards',
                "type": "get",
                "datatype": "json",
                "dataSrc": function(json) {
                    return json;
                }
            },
            "columns": [                  
                { "data": "Name" },
                { "data": "Description" },
                { "data": "StartDate" },
                { "data": "EndDate" }
            ]
        });

Table looks like this:

But I want another custom column like this:

            <div class="btn-group">
                <button class="btn btn-sm dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-wrench"></i> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu fa-pull-right">
                    <li>
                        <a href="@Url.Action("Edit", new { id = item.ID })">
                            <i class="fa fa-pencil"></i> Edit
                        </a>
                    </li>
                    <li>
                        <a id="DeleteBoard" data_number="@item.ID">
                            <i class="fa fa-trash"></i> Delete
                        </a>
                    </li>
                    <li>
                        <a href="@Url.Action("Details", new { Id = item.ID })">
                            <i class="fa fa-info-circle"></i> Details
                        </a>
                    </li>
                </ul>
            </div>

Actually, this exact code to be another row. How do I do that? Any suggestions? Maybe I missed a similar question? I'm just completely lost so I would be thankful with any type of help.

Answer 1

Other suggestions are alright, but they didn't work for me. I tried to find suggestions but the only one that worked was this one:

var oTable = $('#boardTable2').DataTable({
            "ajax": {
                "url": '/Boards/GetBoards',
                "type": "get",
                "datatype": "json",
                "dataSrc": function(json) {
                    return json;
                }
            },
            "columns": [
                { "data": renderNameandID},
                { "data": "Description" },
                { "data": "StartDate" },
                { "data": "EndDate" },
                { "data": "Id", "render" : function(Data) {
                    return "<a class='btn btn-default btn sm' href='@Url.Action("Edit","Boards")/" + Data + "''><i class='fa fa-pencil'></i>Edit</a>" +
                            "<a class='btn btn-danger btn sm' id='DeleteBoard' href='@Url.Action("Delete","Boards")/" + Data + "''><i class='fa fa-trash'></i>Delete</a>" +
                            "<a class='btn btn-default btn sm' href='@Url.Action("Details","Boards")/" + Data + "''><i class='fa fa-info'></i>Details</a>";
                },
                    "orderable": false,
                    "searchable" : false,
                    "width":"150px"
                }
            ],
            "language" : {
                "emptyTable" : "No data found"
            }
        });

Answer 2

Basicly if you want to create additional data column with Jquery Datatables i would pass additional data via ajax. It is not necessary unless you want to pass Razor syntax in HTML @Url.Action("Edit", new { id = item.ID }). If you want to add whole this HTML btn-group you need to create maybe a HTML helper to fold this btn-group HTML with C# syntaxes like Url.Action() or item.ID. Then add it to each taken record and return to ajax.
Remeber to create additional html <tr> because Datatables need to have the same count of column in data and also in selected table.

JSFiddle

Answer 3

try this option

var html = 'insert your html here'

 var oTable = $('#boardTable2').DataTable({
        "ajax": {
            "url": '/Boards/GetBoards',
            "type": "get",
            "datatype": "json",
            "dataSrc": function(json) {
                return json;
            }
        },
        "columns": [                  
            { "data": "Name" },
            { "data": "Description" },
            { "data": "StartDate" },
            { "data": "EndDate" }
        ],
        "columnDefs": [ {
        "targets": -1,
        "data": null,
        "defaultContent": html
    } ]
    });