尝试使用数据表将服务器端数据加载到剃刀页面时出错
Error while trying to load server-side data into razor page using datatables
我的 table 查看代码是:
<table class="table table-bordered table-hover table-striped table-content" id="table3">
<thead>
<tr>
<th>messageId</th>
<th>messageText</th>
<th>messageDate</th>
<th>receiverUserId</th>
<th>isSeen</th>
<th>senderId</th>
<th>dateSeen</th>
<th>user</th>
</tr>
</thead>
jQuery代码:
$('#table3').DataTable( {
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/Admin/LoadPmData",
"type": "POST",
"datatype": "json",
"columns": [
{"data":"messageId"},
{"data":"messageText"},
{"data":"messageDate"},
{"data":"receiverUserId"},
{"data":"isSeen"},
{"data":"senderId"},
{"data":"dateSeen"},
{"data":"user"}
]
}
});
控制器:
[HttpPost]
public JsonResult LoadPmData()
{
var pm = _messageRepository.GetAllMessages();
return Json(new { data = JsonSerializer.Serialize(pm) });
}
我收到以下错误警报:
DataTables warning: table id=table3 - Requested unknown parameter '1' for row 0. For more information about this error, please see http://datatables.net/tn/4
我该如何解决?
只需要将列表放入Json()
,这里有一个演示:
控制器:
[HttpPost]
public JsonResult LoadPmData()
{
var pm = _messageRepository.GetAllMessages();//make sure the type of pm is List<Message>
return Json(pm);
}
jQuery(尝试将列放在 ajax 之外):
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script>
$('#table3').DataTable( {
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/Admin/LoadPmData",
"dataSrc": ""
},
"columns": [
{"data":"messageId"},
{"data":"messageText"},
{"data":"messageDate"},
{"data":"receiverUserId"},
{"data":"isSeen"},
{"data":"senderId"},
{"data":"dateSeen"},
{"data":"user"}
]
});
</script>
结果:
我的 table 查看代码是:
<table class="table table-bordered table-hover table-striped table-content" id="table3">
<thead>
<tr>
<th>messageId</th>
<th>messageText</th>
<th>messageDate</th>
<th>receiverUserId</th>
<th>isSeen</th>
<th>senderId</th>
<th>dateSeen</th>
<th>user</th>
</tr>
</thead>
jQuery代码:
$('#table3').DataTable( {
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/Admin/LoadPmData",
"type": "POST",
"datatype": "json",
"columns": [
{"data":"messageId"},
{"data":"messageText"},
{"data":"messageDate"},
{"data":"receiverUserId"},
{"data":"isSeen"},
{"data":"senderId"},
{"data":"dateSeen"},
{"data":"user"}
]
}
});
控制器:
[HttpPost]
public JsonResult LoadPmData()
{
var pm = _messageRepository.GetAllMessages();
return Json(new { data = JsonSerializer.Serialize(pm) });
}
我收到以下错误警报:
DataTables warning: table id=table3 - Requested unknown parameter '1' for row 0. For more information about this error, please see http://datatables.net/tn/4
我该如何解决?
只需要将列表放入Json()
,这里有一个演示:
控制器:
[HttpPost]
public JsonResult LoadPmData()
{
var pm = _messageRepository.GetAllMessages();//make sure the type of pm is List<Message>
return Json(pm);
}
jQuery(尝试将列放在 ajax 之外):
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script>
$('#table3').DataTable( {
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/Admin/LoadPmData",
"dataSrc": ""
},
"columns": [
{"data":"messageId"},
{"data":"messageText"},
{"data":"messageDate"},
{"data":"receiverUserId"},
{"data":"isSeen"},
{"data":"senderId"},
{"data":"dateSeen"},
{"data":"user"}
]
});
</script>
结果: