Requested unknown parameter when using the jquery datatable and add data with ajax call

Question

I am using jQuery datatable in my MVC application and first time I send data to it from server and its working fine but when I want update the table with SignalR request then it gives the requested unknown parameter.

HTML

<table id="tblEmployeeOut" class=" table table-striped table-bordered table-hover">
<thead>
<tr>
<th>
Id
</th>
<th>
Name
</th>
</tr>
</thead>
<tbody>
@foreach (var item in employeeOut)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.EnrollNumber)
</td>
<td>
<span> @item.FirstName @item.LastName</span>
</td>
</tr>
}
</tbody>
</table>

Script

$('#tblEmployeeOut').dataTable({
bLengthChange: false,
"dom": '<"top"i>rt<"bottom"flp><"clear">',
sPaginationType: 'full_numbers',
bFilter: false,
bInfo: false,
iDisplayLength: 5,
"language": {
"emptyTable": " No Clients"
},
"aoColumns":
[
{ "sName": "Id" },
{ "sName": "Name" }
]
});

In the second image you can see the returned "Json" and in third image the alert shown by jQuery datatable.

Answer 1

You cannot simply call

datatable.fnAddData(stock); // stock is an array of objects

without using mData.

You need to provide other types of input data. (check this and navigate yourself to the specification of fnAddData).

You might want to try a simple function I have just come up with:

function objArrayToStringArray(array) {
        return array.map(function (item) {
            return [item["Id"], item["Name"]];
        });
    }

and use it like so:

var tmp = objArrayToStringArray(stock);
$('#tblEmployeeOut').dataTable().fnAddData(tmp);

Hope this helps.

UPDATE: if you use mData attribute for the columns like this:

"aoColumns":
    [
    { "sName": "Id", "mData": "Id" },
    { "sName": "Name", "mData": "Name" }
    ]

then you can simply call it easily like you want to:

$('#tblEmployeeOut').dataTable().fnClearTable();
$('#tblEmployeeOut').dataTable().fnAddData(stock);