【发布时间】：2017-02-03 19:09:12
【问题描述】：
我的控制器中有一个动作，它返回一个活动列表，这可以毫无问题地呈现给我的数据表，但是，我没有看到表格底部显示的记录数正确呈现。我做了一些挖掘，看起来需要一些额外的属性才能让它工作。我在控制器和 ajax 调用中添加了这些属性，现在我看到“显示 3 个条目中的 1 个”，但我的数据表中没有数据。
当数据表显示结果但显示“显示 0 的 0 ...”时，这是我的控制器操作。
控制器
[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>' }]
});
根据下面的文档，需要一些额外的属性才能使页脚工作。 https://datatables.net/manual/server-side
我相应地修改了我的控制器动作和html.....
[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>' }]
});
这是从我的控制器返回的 JSON，它是有效的。
{"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"}]}
还有数据表...
知道如何获取数据表以呈现数据并显示表中的条目数吗？我发现文档不适用于我尝试的每个场景。
我用下面的看看返回的数据...
table.on('xhr', function () {
var json = table.ajax.json();
console.log(table.ajax.json());
});
【问题讨论】：
-
开发者工具控制台是否报错？
-
感谢您的回复。没有错误。返回 JSON 数据，当我使用 consolg.log 时，我可以在 data 属性中看到返回的数组。
-
您能把
"dataSrc": ""删掉，然后重试吗？ -
@annoyingmouse BINGO！这似乎解决了这个问题。我在有效负载中有dataSrc，因为我无法让网格填充但是在我尝试添加页脚之前。谢谢！创建这个作为答案，我会相信你。
标签： json asp.net-mvc datatables