Pagination 如何使用服务器端分页将数据加载到KendoUI网格中？

我有以下构建剑道ui网格的代码：

    // build grid columns

    // the check box column is always visible for all users
    var columns = [{
        field:'<input id="masterCheck" class="check" type="checkbox" /><label for="masterCheck"></label>', 
        template: '<input class="check rowSelect" id="${id}" type="checkbox" /><label for="${id}"></label>',
        filterable: false,
        width: 33,
        sortable: false // may want to make this sortable later. will need to build a custom sorter.
    }];

    // build the rest of the columns using data provided by the server
    var metrics = initialData.metric;
    for (var i=0; i < metrics.length; i++) {
        var metric = metrics[i];
        var column = {};
        column.field = metric.qualifiedName;
        column.title = metric.label;
        column.width = metric.colWidth;
        // initially hide all columns. we'll know exactly which ones to show after a search
        column.hidden = true;        
        column.type = metric.type;

        // handle special considerations
        if (column.type === 'float' || column.type === 'int') {        

            // format all floats to two decimal places
            if (column.type === 'float') {
                column.format = '{0:n2}';
            }
            // the grid only has a type of number.            

            column.attributes = {'class' : 'right-align'};

            var field = column.field;

            // create a closure to build a function that captures the field variable value
            // in this iteration. Immediately execute the anonymous outer function so 
            // that the inner function is returned as assignment to the footerTemplate
            // variable. The param data will be passed to the function by the grid.
            // That function then executes the buildFooter which has the right field value
            // due to the closure. notice that each invocation of the outer function
            // creates a new scope chain that adds a new inner function.
            column.footerTemplate = (function(field, columnType) {return function() { return buildFooter(field, columnType); }; })(field, metric.type);
            column.type = 'number';

        } else if (column.type === 'date') {
            column.format = '{0:yyyy-MM-dd}';
        } else if (column.field === 'attachments') {
            //column.field = 'text';
            // use a template defined in search.jsp to style this complex
            // object
            column.template = kendo.template($('#attachmentTemplate').html());
            column.sortable = false;
            column.filterable = false;
        } else if (column.type === 'list') {
            column.type = 'string';
        }

        columns.push(column);        
    }

    var toolbarItems = [{ name: 'custom', text: 'Filter', className: 'filterClass k-state-disabled', imageClass: 'k-icon k-i-funnel'},
                        { name: 'view', text: 'View', className: 'viewClass k-state-disabled', imageClass: 'k-icon k-i-search' }];
    // only show build the edit and delete buttons in the toolbar if the
    // user has permissions
    if ($('#hasAdminControls')[0]) {
        toolbarItems.push({ name: 'edit', text: 'Edit', className: 'editClass k-state-disabled' });
        toolbarItems.push({ name: 'destroy', text: 'Delete', className: 'deleteClass k-state-disabled' });
    }

    var options = {

        autoBind: false,
        dataBound: function() {

            alert('dataBound');
            for(var i =0; i <  checkedRows.length; i++){
                $('#'+ checkedRows[i]).attr('checked','checked');
            }            
            $('.rowSelect').click(setGridControlsState);
            setGridControlsState();

            $('.k-grid-content').removeHighlight();
            $('.k-grid-content').highlight(uniqueHighlights);
        },    
         dataSource: {
            //type: 'json',
            //batch: 'true',
            serverPaging: true, // we may need to use paging for performance reasons
            //schema: {
            //    total: 'total'//function(response) { console.log(response); alert('hi2'); return 500; }
            //},
            //schema: {
                //model: Acquisition // if we use a model then complex objects' fields all have string type

            pageSize: 10, 

            //serverFiltering: true, // we may want to use this in the future if client filtering becomes a performance issue
            //serverSorting: true, // we may want to use this in the future if client sorting becomes a performance issue
            transport: { read: 
            function(options) {

                var setupOptions = { 
                        success: function(data, statusText, xhr, $form) {options.success(data); loadSearch(data, statusText, xhr, $form)},
                        type: 'POST',
                        dataType: 'json',
                        data: {skip: options.data.skip, take: options.data.take},
                        url:   '../search.x',
                        error: errorHandler.handle,
                        timeout: 50000
                };
                $('#searchForm').ajaxSubmit(setupOptions);
            }

            }
        },
        height: 600,
        pageable: {
            //numeric: false,
            //previousNext: false,
            messages: {
                display: "{2} Acquisitions"
            },
            pageSizes: true
        },
        sortable: true,
        resizable: true,
        filterable: true,
        toolbar: toolbarItems,
        columns: columns
    };

    // create the grid using the above options
    $('#resultsGrid').kendoGrid(options);

    // for purely aesthetic purposes, move the toolbar to the bottom (by default it's at the top) 
    $('#resultsArea').find('.k-grid-toolbar').insertAfter($('#resultsArea .k-grid-footer'));
    var grid = $('#resultsGrid').data('kendoGrid');
    grid.refresh();

函数调用grid.dataSource.read（）将导致对transport.read启动的服务器的AJAX调用。然而，success函数从未被调用，因为kendo抛出了一个错误。它声明d.oneOfMyObjects是未定义的kendo.web.min.js（第9行）。当我查看json响应时，我有几个来自服务器的json对象。其中一个对象是对象数组。每个对象都有一个名为OneOfMyObject的属性（即对象）。每个MyObject都是非空的。所以，我不知道剑道为什么会失败。我正在使用kendoui.2012.3.1315。如何阻止kendo抛出此错误并允许调用loadSearch回调函数

第二次编辑 错误发生在选项处的success函数中。success（数据）

编辑 编辑问题以包含来自服务器的输出。请注意，相同的输出可以在没有服务器分页的情况下正常工作（出于数据安全目的，还必须修改输出…我试图保持相同的结构，但希望我没有意外更改，使其不符合JSON）：

第三次编辑，包括加载搜索功能

function loadSearch(data, statusText, xhr, $form, options) {

    if (data.validationError) {
        // TODO we need to look at the message from the reply
        // right now though only date validation errors will exist
        dialog.show('Error', 'Please enter dates formatted as yyyy-mm-dd.');
        global.loadingIndicator.hide();
        return;
    }

    checkedRows = [];
    var object= data.object;

    var grid = $('#resultsGrid').data('kendoGrid');

    // clear any filters. This also help with an issue where no 
    // rows are shown due to a filter.
    grid.dataSource.filter({});


    // set the search results data in the grid
    grid.dataSource.data(object);

    // show columns that are either a user preference
    // column (or default set if user has no preferences)
    // or a field matching search data

    // let's only hide/show the delta between
    // previously viewed cols and new cols to display 
    // since it's much faster than hiding all old
    // and then displaying all new cols
    var oldCols = $('#displayColumns').val() || [];

    // the server tells the UI which fields to display
    // based on user preference and fields that that
    // have matching search data
    var newCols = data.displayFields;

    var removedCols = oldCols.diff(newCols);
    for (var i in removedCols) {
        $('#displayColumns option[value="' + removedCols[i] + '"]').removeAttr('selected');
        grid.hideColumn(removedCols[i]);
    }

    var addedCols = newCols.diff(oldCols);
    for (var i in addedCols) {
        grid.showColumn(addedCols[i]);
        $('#displayColumns option[value="' + addedCols[i] + '"]').attr('selected', 'selected');
    }

    // we have to tell the chosen overlay that we updated the list
    $('#displayColumns').trigger('liszt:updated');

    // we have to keep track of the current selected values
    // so that when the user changes to selection we'll 
    // be able to compare to the original selection
    // and now what they changed.
    $('#displayColumns').data('chosen-values', $('#displayColumns').val());


    // display the results
    grid.refresh();

    realignFooter();

    // Highlight search matches so the user can easily see
    // why the record is in the result grid.
    // Unfortunately, the highlights library takes a comma-delimited list.
    // It's problematic when the search results contain a comma.


    // remove previous highlights
    //$('.k-grid-content').removeHighlight();

    uniqueHighlights = data.uniqueHighlights || [];
    $('.k-grid-content').removeHighlight();
    $('.k-grid-content').highlight(uniqueHighlights);

    // reset the controls since all checkboxes have been cleared
    setGridControlsState();

    // register event to capture clicks on grid checkboxes
    // we can't do this during initialization b/c the checkboxes
    // are not yet built. Note: we don't have to remove
    // the events associated with previous checkboxes as 
    // jquery should automatically do this.
    $('.rowSelect').click(setGridControlsState);

    // remove loading indicator
    global.loadingIndicator.hide();

    // style the UI to give the user an option to save the columns again
    $('#saveCols > span').empty().text('Save Columns');
    $('#saveCols').removeClass('k-state-disabled');

}

---

您没有在

schema

中指定查找数据的位置。你需要这样说：

schema   : {
    data : "object",
    total: "total"
}

事实上，您并没有说在哪里可以找到结果，这使得显示任何字段都是不可能的

---

关于从未调用成功函数，这样的选项不存在（AFAIK）。

我只是想说明一下什么对您有用，但很难看到代码，因此我将开始讨论，看看是否能完全回答您的问题

transport: {
    read: {
        url: '@Url.Action("_List", "Check")',
        data: gridParams,
        type: 'POST'
    },
function gridParams() {
        return {
            Field1: $('#fd1').val(),
            Field2: $('#fd2').val(),
            Field3: $('#fd3').val()
        };
    }

fd1-3将是您需要将参数传递给控制器的字段的搜索表单Id

那么对于控制器的操作

[HttpPost]
    public JsonResult _List(string Field1, DateTime? Field2, DateTime? Field3, int skip, int take)
    {

然后您只需使用这些参数来更改db.TableName.Where（w=>w.fd1==Field1&&w.fd2==Field2 | | w.fd3==Field3）。跳过（Skip）

---

诸如此类。

您介意在OP中包含一个响应示例吗？您从哪里获得的

传输。read

具有

成功

选项？我在文件里找不到……你说得对。这就解释了为什么从来没有调用loadSearch。但我需要调用一个成功函数。所以，我编辑了我的问题，使得transport.read指向一个函数。该函数中的AJAX调用是通过的。您在什么环境中执行此操作？至少对于mvc来说，你不需要担心页面上的skip/take，只需要在控制器操作中使用它。我必须明确地传递skip和take，因为我需要自己进行AJAX调用b/c，我正在使用一个表单插件。谢谢你的回复。我有一种方法可以获取表单数据，而不必使用。我对原始问题进行了编辑，以说明我是如何做到这一点的。我试图将read设置为一个对象来克服错误，但是我真的需要将它设置为一个函数，因为我想使用表单插件。请参见上述修改。抱歉换了。谢谢你。这确实防止了我看到的错误。但是，总数尚未确定。因此，客户端UI认为只有一页数据存在。如何正确设置总计？另外，你能看看上面我的最新编辑吗？我必须将transport.read更改为指向一个函数，因为我需要一个success函数，并且希望使用Malsup表单插件。很抱歉，但实际上我仍然在将schema.data设置为对象时出错。错误发生在options.success（data）错误为TypeError:e.indexOf不是函数（kendo.web.min.js（第9行））。我可以删除该调用，错误消失，但未设置总数。

  var dataSource = new kendo.data.DataSource({
      serverPaging: true,
      serverSorting: true,
      pageSize : 15,
      transport : {
         read : {
           url : getEmployeeData,
           dataType : "json"
         },
         parameterMap : function(options, operation) {
            if (operation == "read") {
                return {
                  page: dataSource._page,
                  pageSize: dataSource._pageSize
            };
         }
      }
    },
    batch : true,
    schema : {
      data: "data",
      total: "total",
      model : {
        id : "id",
        fields : {
          name : {
            validation : {
              required : true
            }
          }
        }
      }
    }
  });

[HttpPost]
    public JsonResult _List(string Field1, DateTime? Field2, DateTime? Field3, int skip, int take)
    {

  var dataSource = new kendo.data.DataSource({
      serverPaging: true,
      serverSorting: true,
      pageSize : 15,
      transport : {
         read : {
           url : getEmployeeData,
           dataType : "json"
         },
         parameterMap : function(options, operation) {
            if (operation == "read") {
                return {
                  page: dataSource._page,
                  pageSize: dataSource._pageSize
            };
         }
      }
    },
    batch : true,
    schema : {
      data: "data",
      total: "total",
      model : {
        id : "id",
        fields : {
          name : {
            validation : {
              required : true
            }
          }
        }
      }
    }
  });