Question

我在我的控制器中有一个动作，它返回一个活动列表，这是在没有问题的情况下呈现给我的数据表，但是，我没有看到表格底部显示的记录数量正确呈现。我做了一些挖掘，看起来有一些额外的属性需要让它工作。我在我的控制器和ajax调用中添加了这些属性，现在我看到＆＃39;显示3个条目中的3个中的1个＆＃39;但我的数据表中没有数据。

因此，当数据表显示结果时，这是我的控制器操作，但是显示0的0 ...＆＃39;显示。

控制器

[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());
});

Answer 1

如果删除dataSrc，应该开始工作：

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>'
  }]
});

很高兴有帮助。： - ）

Answer 2

我没有看到数据或服务器端代码的问题 - 这是您分配数据的方式。

我刚刚在没有AJAX的情况下分配数据，它可以看到小提琴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>' }]});

我想说从AJAX中删除JSON.stringy或dataFilter它应该可以正常工作。

如果有帮助，请告诉我。

Datatables.js问题和问题

2 个答案: