在让服务器端处理与 Datatables 和 MVC4 一起工作时遇到问题答案

【问题标题】：Having problems getting server side processing to work with Datatables and MVC4在让服务器端处理与 Datatables 和 MVC4 一起工作时遇到问题
【发布时间】：2015-04-13 16:30:22
【问题描述】：

您好，我们目前有一个 MVC4 应用程序，它将带有缩略图的大量记录带入一个 jQuery Datatables 驱动的视图中。当它执行 GET 加载所有缩略图时，这当然加载非常缓慢。为了解决这个问题，我试图让它使用服务器端处理并且一次只能得到 10 个结果。

为此，我遵循了 Datatables 文档并像这样更改了 Javascript：

<script>
$(document).ready(function () {
    //Create an array with the values of all the checkboxes in a column */
    $.fn.dataTable.ext.order['dom-checkbox'] = function (settings, col) {
        return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
            return $('input', td).prop('checked') ? '1' : '0';
        });
    }

    /* Initialise the table with the required column ordering data types */
    $(document).ready(function () {
        $('.passes').dataTable({

            "serverSide": true,
            "processing": true,
            "ajax": "/Pass/Datatable",



            "columns": [
                { "orderDataType": "dom-text-numeric "},
                { "orderDataType": "dom-text-numeric" },
                { "orderDataType": "dom-text-numeric" },
                { "orderDataType": "dom-text-numeric" },
                { "orderDataType": "dom-text-numeric" },
                { "orderDataType": "dom-checkbox" },
                { "orderDataType": "dom-text-numeric" }
            ],

            "order": [[5, "desc"]]


        });
    });
});

这是从我返回 JSON 结果的控制器中的方法获取 AJAX 源。我从我的 SQL 表中获取信息，然后使用我在 Github 上找到的 Datatable 解析器来解析我进入 JSON 的信息，如下所示：

        public JsonResult Datatable(int passesPerPage, HttpRequest Request)
    {
        //default number of passes will be set to 10
        passesPerPage = 10;


        var passes = db.Cards.OrderBy(c => c.Vendor.Name); // fetch the data from data model
        passes.Take(passesPerPage); //Takes the number of passes requested per page so as not to overload the server
        var parser = new DataTablesParser<Card>(Request, passes); //pass the parser the data to parse it into JSON
        return Json(parser.Parse()); // have the parser parse the request parameters and return the Json Result

    }

当我测试网页时，它仍然会加载所有记录并且根本没有分页功能。我想知道我到底做错了什么，因为除了意外行为之外，我没有收到任何类型的错误。如果我能得到关于如何调试它的任何帮助，或者如果有人能看到我做错了什么，我将不胜感激。

【问题讨论】：

当我检查服务器错误日志时，这是我从数据表返回的 ASP.NET 错误。值不能为空。参数名称：String 导致错误的行是这一行：第 46 行：return Json(parser.Parse()); // 让解析器解析请求参数并返回 Json Result
如果您收到 ajax 错误，那么可能是因为 ajax 返回的结果不是您的插件所期望的格式。您需要深入研究 dataTables tutotial 以了解如何使用它所期望的格式进行数据...

标签： javascript jquery json asp.net-mvc-4 datatable

【解决方案1】：

对分页的数据表属性进行一些更改：

$('.passes').dataTable({
        "serverSide": true,
        "processing": true,
        "ajax": "/Pass/Datatable",
        "bDestroy": true,
        "iDisplayLength": 10,
        "aLengthMenu": [5, 10, 25, 50, 100],
        "sPaginationType": "full_numbers",
        "columns": [
            { "orderDataType": "dom-text-numeric " },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-text-numeric" },
            { "orderDataType": "dom-checkbox" },
            { "orderDataType": "dom-text-numeric" }
        ],
        "order": [[5, "desc"]]
    });

【讨论】：

谢谢，但它仍在加载超过 10 条记录，而且我还收到一个确认框，说明 DataTables 存在 AJAX 错误。我觉得我试图从控制器中提取的内容有问题。

【解决方案2】：

首先，对不起我的英语。如果这有帮助，那么我可以说，DataTablesParser 会自动从 Request 获取数据并根据需要解析您的数据。 Datatables.js 的请求有一些属性为 start 和 length（据我所知，它是 Parser 所需的属性）（https://datatables.net/manual/server-side），Dataparser 将此数据用于根据需要解析数据。所以你不需要这样做

var passes = db.Cards.OrderBy(c => c.Vendor.Name);
passes.Take(passesPerPage);

只需使用：

public JsonResult Datatable()
{
    var parser = new DataTablesParser<Card>(Request, SomeIQueryableData); 
    return Json(parser.Parse()); 
}

【讨论】：