Вопросы и вопросы Datatables.js

Question

У меня есть действие в моем контроллере, которое возвращает список действий, и это был рендеринг на мой datatable без проблем, однако я не видел количества записей, отображаемых внизу таблицы должным образом. Я сделал кое-что, и похоже, что для его работы требуются дополнительные свойства. Я добавил эти свойства в свой контроллер и вызов ajax, и теперь я вижу «Отображение 1 из 3 из 3 записей», но никаких данных в моем datatable.

Итак, это мое действие с контроллером, когда отображаются результаты данных, но отображается «Отображение 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"}]} 

И DataTable ...

Любая идея, как получить ОБА DataTable для визуализации данных и показать количество записей в таблице? Я считаю, что документация не работает для каждого сценария, который я пытаюсь выполнить.

Я использовал следующее, чтобы увидеть данные, возвращаемые ...

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

Я бы сказал, удалить JSON.stringy или dataFilter с AJAX и он должен работать нормально.

Дайте мне знать, если это поможет.