Datatables.js issues and questions - json

Question

I have a action in my controller that returns a list of activities and this was rendering to my datatable without issue, however, I did not see the number of records displayed at the bottom of the table rendering properly. I did some digging and it looks like there are some additional properties required to get this to work. I added those properties in my controller and ajax call and now I see 'Showing 1 of 3 of 3 entries' but no data in my datatable.
So here is my controller action when the datatable displays results but 'Showing 0 of 0 ...' is displayed.
Controller
[HttpPost]
public JsonResult GetAllActivities(int UserId)
{
return Json(repository.GetAllActivities(UserId), JsonRequestBehavior.AllowGet);
}
HTML
<div class="panel-body">
<table id="master" class="table table-striped table-hover table-condensed" cellspacing="0">
<thead>
<tr>
<th class="rpt_col_bg_head" style="width: 3%;"></th>
<th class="rpt_col_bg_head" style="width: 20%;">Result</th>
<th class="rpt_col_bg_detail" style="width: 20%;">Work Activity</th>
<th class="rpt_col_bg_detail" style="width: 180px;">Effort(%)</th>
<th class="rpt_col_bg_detail" style="width: 7%;">Status</th>
<th class="rpt_col_bg_detail" style="width: 30%;">Were there any innovations</th>
<th class="rpt_col_bg_detail text-center" style="width: 7%;">Action</th>
</tr>
</thead>
</table>
</div>
JavaScript
var table = $('#master').DataTable( {
"processing": true,
"serverSide": true,
"columnDefs" : [{
"targets" : [0],
"visible" : true,
"searchable" : false
}],
"ajax" : {
"type" : "POST",
"url" : "#Url.Action("GetAllActivities", "Activities")",
"data" : { "UserId" : employeeId },
"dataSrc" : ""
},
"columns": [
{
"className" : "details-control", "orderable" : false, "data": "ActivityHistoryId" },
{ "data" : "ParentName" },
{ "data" : "ActivityName" },
{ "data" : "Effort" },
{ "data" : "Status" },
{ "data" : "Innovation" },
{ "defaultContent" : '<td><div><button class="btn btn-xs btn-primary" title="edit work activity" name="editWork"></button></div></td>' }]
});
According to the documentation below some additional properties are required to get the footer to work.
https://datatables.net/manual/server-side
I modified my controller action and html accordingly.....
[HttpPost]
public JsonResult GetAllActivities(int UserId)
{
int count = 0;
var data = repository.GetAllActivities(UserId);
foreach (var item in results)
{
count++;
}
return Json(new { draw = 1, recordsTotal = count, recordsFiltered = count, data }, JsonRequestBehavior.AllowGet);
}
HTML
var table = $('#master').DataTable({
"processing": true,
"serverSide": true,
"columnDefs" : [{
"targets" : [0],
"visible" : true,
"searchable" : false
}],
"ajax" : {
"type" : "POST",
"url" : "#Url.Action("GetAllActivities", "Activities")",
"data" : { "UserId" : employeeId },
"dataFilter" : function(data) {
var json = jQuery.parseJSON(data);
json.recordsTotal = json.recordsTotal;
json.recordsFiltered = json.recordsFiltered;
json.data = json.data;
return JSON.stringify(json);
},
"dataSrc" : ""
},
"columns": [
{ "className" : "details-control", "orderable" : false, "data": "ActivityHistoryId" },
{ "data" : "ParentName" },
{ "data" : "ActivityName" },
{ "data" : "Effort" },
{ "data" : "Status" },
{ "data" : "Innovation" },
{ "defaultContent" : '<td><button class="btn btn-xs btn-primary" title="edit work activity" name="editWork"></button></div></td>' }]
});
Here is the JSON returned from my controller, which is valid.
{"draw":1,"recordsTotal":3,"recordsFiltered":3,"data":[{"ActivityHistoryId":1,"UserId":91,"WorkFlowId":4,"ActivityName":"Test Activity 1","ActivityDescription":"Description of Test Activity 1","Status":"\u003cspan class=\u0027badge badge-blue\u0027\u003eNot Started\u003c/span\u003e","Effort":10,"Innovation":false,"ParentId":2,"ParentName":"Test Result 1"},{"ActivityHistoryId":2,"UserId":91,"WorkFlowId":4,"ActivityName":"Test Activity 2","ActivityDescription":"Description of Test Activity 2","Status":"\u003cspan class=\u0027badge badge-blue\u0027\u003eNot Started\u003c/span\u003e","Effort":16,"Innovation":false,"ParentId":2,"ParentName":"Test Result 1"},{"ActivityHistoryId":3,"UserId":91,"WorkFlowId":4,"ActivityName":"Test Activity 3","ActivityDescription":"Description of Test Activity 3","Status":"\u003cspan class=\u0027badge badge-lightBlue\u0027\u003eIn Progress\u003c/span\u003e","Effort":25,"Innovation":false,"ParentId":5,"ParentName":"Test Result 2"}]}
And the datatable...
Any idea how to get BOTH the datatable to render data AND show the number of entries in the table? I find the documentation does not work for every scenario I try.
I used the following to see the data returned...
table.on('xhr', function () {
var json = table.ajax.json();
console.log(table.ajax.json());
});

Answer 1

If you remove dataSrc things should start working:
var table = $('#master').DataTable({
"processing": true,
"serverSide": true,
"columnDefs": [{
"targets": [0],
"visible": true,
"searchable": false
}],
"ajax": {
"type": "POST",
"url": "#Url.Action("
GetAllActivities ", "
Activities ")",
"data": {
"UserId": employeeId
},
"dataFilter": function(data) {
var json = jQuery.parseJSON(data);
json.recordsTotal = json.recordsTotal;
json.recordsFiltered = json.recordsFiltered;
json.data = json.data;
return JSON.stringify(json);
}
},
"columns": [{
"className": "details-control",
"orderable": false,
"data": "ActivityHistoryId"
}, {
"data": "ParentName"
}, {
"data": "ActivityName"
}, {
"data": "Effort"
}, {
"data": "Status"
}, {
"data": "Innovation"
}, {
"defaultContent": '<td><button class="btn btn-xs btn-primary" title="edit work activity" name="editWork"></button></div></td>'
}]
});
Glad that helped. :-)

Answer 2

I don't see problem with the data or server side code - it is the way you are assigning data.
I just assigned data without AJAX and it works see the fiddle https://jsfiddle.net/jituce/1naw041z/6/
var table = $('#master').DataTable( {
"processing": true,
"data":[{"ActivityHistoryId":1,"UserId":91,"WorkFlowId":4,"ActivityName":"Test Activity 1","ActivityDescription":"Description of Test Activity 1","Status":"\u003cspan class=\u0027badge badge-blue\u0027\u003eNot Started\u003c/span\u003e","Effort":10,"Innovation":false,"ParentId":2,"ParentName":"Test Result 1"},{"ActivityHistoryId":2,"UserId":91,"WorkFlowId":4,"ActivityName":"Test Activity 2","ActivityDescription":"Description of Test Activity 2","Status":"\u003cspan class=\u0027badge badge-blue\u0027\u003eNot Started\u003c/span\u003e","Effort":16,"Innovation":false,"ParentId":2,"ParentName":"Test Result 1"},{"ActivityHistoryId":3,"UserId":91,"WorkFlowId":4,"ActivityName":"Test Activity 3","ActivityDescription":"Description of Test Activity 3","Status":"\u003cspan class=\u0027badge badge-lightBlue\u0027\u003eIn Progress\u003c/span\u003e","Effort":25,"Innovation":false,"ParentId":5,"ParentName":"Test Result 2"}],
"serverSide": false,
"columnDefs" : [{
"targets" : [0],
"visible" : true,
"searchable" : false
}],
"columns": [
{
"className" : "details-control", "orderable" : false, "data": "ActivityHistoryId" },
{ "data" : "ParentName" },
{ "data" : "ActivityName" },
{ "data" : "Effort" },
{ "data" : "Status" },
{ "data" : "Innovation" },
{ "defaultContent" : '<td><div><button class="btn btn-xs btn-primary" title="edit work activity" name="editWork"></button></div></td>' }]});
I would say remove JSON.stringy or dataFilter from the AJAX and it should work fine.
Let me know if this helps.