Error while trying to load server-side data into razor page using datatables - asp.net-mvc

Question

My table code in view is:
<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 code:
$('#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"}
]
}
});
The controller:
[HttpPost]
public JsonResult LoadPmData()
{
var pm = _messageRepository.GetAllMessages();
return Json(new { data = JsonSerializer.Serialize(pm) });
}
I have the following error as alert:
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
How can I fix it?

Answer 1

You only need to put a list into Json(),Here is a demo:
controller:
[HttpPost]
public JsonResult LoadPmData()
{
var pm = _messageRepository.GetAllMessages();//make sure the type of pm is List<Message>
return Json(pm);
}
jQuery(try to put columns outside 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>
result: