尝试使用数据表将服务器端数据加载到剃刀页面时出错

Question

我的 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

我该如何解决？

Answer 1

只需要将列表放入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>

结果：

尝试使用数据表将服务器端数据加载到剃刀页面时出错

Error while trying to load server-side data into razor page using datatables

asp.net-mvc

asp.net-core

datatables