我正在使用DataTable.js并试图实现MVC。 我编写了如下代码:
视图:
<div id="container"> <div id="demo"> <h2>Index</h2> <table id="myDataTable" class="display"> <thead> <tr> <th>ID</th> <th>Event Name</th> <th>Event Type</th> </tr> </thead> <tbody></tbody> </table> </div> </div> @section scripts{ <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function () { $('#myDataTable').dataTable({ "bServerSide": true, "sAjaxSource": "@Url.Action("AjaxHandler","DataTable")", "bProcessing": true, "aoColumns": [ { "sName": "EventID" }, { "sName": "EventName" }, { "sName": "EventTypeTitle" } ] }); }); </script> }和控制器:
public ActionResult Index() { return View(); } public ActionResult AjaxHandler(jQueryDataTableParamModel param) { return Json(new { sEcho = param.sEcho, iTotalRecords = getAllEvent().Count(), iTotalDisplayRecords = getAllEvent().Count(), aaData = getAllEvent() }, JsonRequestBehavior.AllowGet); } private List<EventModel> getAllEvent() { List<EventModel> model = new List<EventModel>(); EventModel model1 = new EventModel { EventID = 1, EventName = "Event 1", EventType = 1, EventTypeTitle = "General" }; model1.EventScheduleList = new List<EventScheduleModel> { new EventScheduleModel {EventScheduleID = 1 }, new EventScheduleModel { EventScheduleID = 2 } }; model.Add(model1); return model; }我收到DataTables警告:table id = myDataTable - 第0行第0列请求的未知参数'0'。有关此错误的更多信息,请参阅http://datatables.net/tn/4
当我研究有关错误时,我可以发现,当数据不正确时,会发生此特定错误。 但是,当我检查回复时,我收到了正确的数据。
是因为我返回了更多在View中使用的列? 或者我在JSON中发送整数值?
我也附上了小提琴链接: https : //dotnetfiddle.net/MEoqg8
I am working with DataTable.js and trying to implement into MVC. I've written code as per below:
View:
<div id="container"> <div id="demo"> <h2>Index</h2> <table id="myDataTable" class="display"> <thead> <tr> <th>ID</th> <th>Event Name</th> <th>Event Type</th> </tr> </thead> <tbody></tbody> </table> </div> </div> @section scripts{ <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function () { $('#myDataTable').dataTable({ "bServerSide": true, "sAjaxSource": "@Url.Action("AjaxHandler","DataTable")", "bProcessing": true, "aoColumns": [ { "sName": "EventID" }, { "sName": "EventName" }, { "sName": "EventTypeTitle" } ] }); }); </script> }And Controller:
public ActionResult Index() { return View(); } public ActionResult AjaxHandler(jQueryDataTableParamModel param) { return Json(new { sEcho = param.sEcho, iTotalRecords = getAllEvent().Count(), iTotalDisplayRecords = getAllEvent().Count(), aaData = getAllEvent() }, JsonRequestBehavior.AllowGet); } private List<EventModel> getAllEvent() { List<EventModel> model = new List<EventModel>(); EventModel model1 = new EventModel { EventID = 1, EventName = "Event 1", EventType = 1, EventTypeTitle = "General" }; model1.EventScheduleList = new List<EventScheduleModel> { new EventScheduleModel {EventScheduleID = 1 }, new EventScheduleModel { EventScheduleID = 2 } }; model.Add(model1); return model; }I am getting DataTables warning: table id=myDataTable - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
As I research about the error I could find that this particular error is occur when data is not in correct manner. but, when I check response, I am getting correct data.
Is it because I have returned more numbers of columns which are used in View? or Do I send integer value in JSON?
I've attached fiddle link as well: https://dotnetfiddle.net/MEoqg8
最满意答案
您需要对JacaScript代码进行非常小的更改,这意味着不需要使用sName而是需要使用aoColumns数组中的data 。
<script> $(document).ready(function () { $('#myDataTable').dataTable({ "bServerSide": true, "sAjaxSource": '@Url.Action("AjaxHandler","Home")', "bProcessing": true, "aoColumns": [ { "data": "EventID", "bSearchable": false, "fnRender": function (oObj) { return '<a href=\"Details/' + oObj.aData[0] + '\">View</a>'; } }, { "data": "EventName" }, { "data": "EventTypeTitle" } ] }); }); </script>你可以在这里检查你的小提琴叉: https : //dotnetfiddle.net/7sXghO
You need to make very small change in you JacaScript code which goes like this, which means instead of using sName you need to use data inside aoColumns array.
<script> $(document).ready(function () { $('#myDataTable').dataTable({ "bServerSide": true, "sAjaxSource": '@Url.Action("AjaxHandler","Home")', "bProcessing": true, "aoColumns": [ { "data": "EventID", "bSearchable": false, "fnRender": function (oObj) { return '<a href=\"Details/' + oObj.aData[0] + '\">View</a>'; } }, { "data": "EventName" }, { "data": "EventTypeTitle" } ] }); }); </script>You can check a fork from your fiddle here : https://dotnetfiddle.net/7sXghO
更多推荐
发布评论