How to add control item to first column of datatable

Question

I have this datatables declaration:

table = $("#table").DataTable({
    "ajax": {
        "url": '@Url.Action("Search", @ViewContext.RouteData.Values["controller"].ToString())',
        "type": "POST",
        "data": function(d) {},
        "datatype": "json"
    },
    "language": {
        "search": "",
        "searchPlaceholder": " Search"
    },
    "select": {
        "style": 'multi'
    },
    "ordering": true,
    "lengthChange": false,
    "columns": [{
        "data": "",
        "targets": 0,
        "className": "control",
        "orderable": false,
        "searchable": false
    }, {
        "data": function(data, type, row, meta) {
            var url = '@Url.Action("Read", @ViewContext.RouteData.Values["controller"].ToString())/' + data.Id;
            return "<a href='" + url + "'>" + data.Application + "</i></a>"
        },
        "name": "Application"
    }, {
        "data": "Logged",
        "name": "Logged",
        "render": function(data) {
            var d = moment(data).format("YYYY-MM-DD hh:mm:ss");
            return d;
        }
    }, {
        "data": "Level",
        "name": "Level"
    }, {
        "data": "Exception",
        "name": "Exception"
    }, {
        "data": "Message",
        "name": "Message"
    }, {
        "data": "UserName",
        "name": "UserName"
    }, {
        "data": "ServerName",
        "name": "ServerName"
    }, ],
    "responsive": {
        "details": {
            "type": "column"
        }
    },
    "processing": true,
    "serverSide": true,
}).columns.adjust().responsive.recalc();
new $.fn.dataTable.FixedHeader(table);

This is my table header declaration:

<thead>
    <tr>
        <th></th>
        <th>Application</th>
        <th>Logged</th>
        <th>Level</th>
        <th>Exception</th>
        <th>Message</th>
        <th>UserName</th>
        <th>ServerName</th>
    </tr>
</thead>

The idea is that the first column or target 0 should be where a button sits to expand or collapse the row. However, when I run the application, I get this error

DataTables warning: table id=table - Requested unknown parameter '' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Its saying that my column 0 parameter can't be blank. But I am unsure of what I should put inside it.

Also, for some reason the sorting arrow is still appearing for that column even though its disabled. However, the arrow doesn't change or do anything when clicked.

Answer 1

You have 8 columns, but only have data for 7 of them. Because you're using server-side processing and have no data for that row, you need to add "defaultContent": "" to your column option like so:

 "columns": [{
        "data": "",
        "targets": 0,
        "className": "control",
        "orderable": false,
        "searchable": false,
        "defaultContent": ""
    }, 

The same can be achived with "data": null but you'll most likely get an [object Object] returned if you don't deal with the null value before it renders.