Question

您好我们目前有一个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"]]


        });
    });
});

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

        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

    }

当我测试网页时，它仍会加载所有记录并且根本没有分页功能。我想知道我在这里做错了什么，因为除了意外行为之外我没有任何其他错误。如果我可以得到任何帮助，我应该如何进行调试，或者如果有人能看到我做错了什么，我会非常感激。

Answer 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"]]
    });

Answer 2

起初，对不起我的英语。如果这可以提供帮助，那么我可以说， DataTablesParser 会自动从请求获取数据并根据需要解析您的数据。来自Datatables.js的请求有一些属性为开始和长度（据我所知，它是Parser所需的属性）（https://datatables.net/manual/server-side），而Dataparser接受此属性用于根据需要解析数据的数据。所以你不需要做

debugger

只需使用：

Ext.override(Ext.window.MessageBox, {
    makeButton: function (btnIdx) {
        debugger;
        var btnId = this.buttonIds[btnIdx];
        return new Ext.button.Button({
            handler: this.btnCallback,
            itemId: btnId,
            scope: this,
            text: this.buttonText[btnId],
            minWidth: 75,
            iconCls: ['check', 'no', 'cancel', 'blah'][btnId]
        });
    }
});

在使用Datatables和MVC4进行服务器端处理时遇到问题

2 个答案: