0
私のコントローラにはアクティビティのリストを返すアクションがありますが、これは問題なくデータテーブルにレンダリングしていましたが、テーブルレンダリングの下部に表示されるレコードの数は表示されませんでした正しく。私はいくつかの掘り出しを行いました。これを動作させるために必要ないくつかのプロパティがあるように見えます。これらのプロパティをコントローラとajaxコールに追加したところ、「3のうち3つのエントリを表示しています」が表示されましたが、データテーブルにはデータはありません。Datatables.jsの問題と質問
データウィンドウの表示結果が「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との...
データをレンダリングし、テーブルのエントリ数を表示するデータテーブルの両方を取得する方法任意のアイデア？私は、私が試したすべてのシナリオでドキュメンテーションが動作しないことを知っています。
私は、データやサーバー側のコードに問題が表示されていないデータが返さ参照するには、以下の...
table.on('xhr', function() {
var json = table.ajax.json();
console.log(table.ajax.json());
});
開発ツールコンソールにエラーがありますか？ – jjj
お返事ありがとうございます。エラーはありません。 JSONデータが返され、consolg.logを使用すると、返された配列がdataプロパティに表示されます。 –
'' dataSrc "：" "'行を削除して、もう一度お試しください。 – annoyingmouse