分页不移动到 kendogrid 中的新数据

Question

请注意，目前我是 ASP.NET MVC、JavaScript 和 Kendo 的新手。 Kendo 网格分页适用于返回的前 500 条记录，但不允许分页从服务器下载超过 500 条的更多数据。这是我的控制器：

    public ActionResult ExecuteTestRule(string ruleId, string ruleSql, string uwi, List<PdsMatchRuleParam> parameters = null)
    {
        if (Request.Url != null)
        {
            var query = PaginationQuery.Parse(Request.QueryString);
            var upperLimit = query.FromUpper;
            var lowerLimit = query.FromLower;
            var dataSource = new MatchDataSource();
            List<DataAccess.DbParameter> dbParameters = null;
            var generatedSql = dataSource.GenerateQuerySql(ruleId, ruleSql, uwi, parameters, out dbParameters);
            var results = dataSource.ExecuteTestRule(ruleId, generatedSql, dbParameters, upperLimit, lowerLimit).Select(u => new { UWI = u });
            var response = new Dictionary<string, object>();
            response["result"] = results;
            response["rowCount"] = MatchDataSource.GetRowCount(generatedSql, dbParameters);

            return Json(response, JsonRequestBehavior.AllowGet);
        }
        return null;
    }

控制器中可用的总行数 "rowCount"：

MatchDataSource.GetRowCount(generatedSql, dbParameters)
91637

这里是控制器中的Request.QueryString：

Request.QueryString
{}
    [System.Web.HttpValueCollection]: {}
    base {System.Collections.Specialized.NameObjectCollectionBase}: {}
    AllKeys: {string[0]}

按下此按钮无效：

这是我的 JavaScript 代码：

function bindTestRuleResults() {
    PageState.Selected.Old.TestRuleResult = PageState.Selected.TestRuleResult;

    var dataSource = new kendo.data.DataSource({
        pageSize: 500,
        data: PageState.Selected.TestRuleResult,
        serverPaging: true
    });
    Grids.TestRuleResultsGrid.setDataSource(dataSource);
    PageState.Selected.TestRuleResult = null;
}

function initTestRuleResultsGrid() {
    $(IDS.testRuleResultsGrid).kendoGrid({
        autoBind: true,
        filterable: false,
        navigatable: true,
        pageable: {
            refresh: true,
            pageSizes: [10, 50, 100, 500],
            buttonCount: 5
        },
        scrollable: true,
        selectable: true,
        serverFiltering: false,
        serverPaging: true,
        serverSorting: true,
        sortable: false,
        columns: [
            { field: "UWI", title: "UWI", width: "100%", attributes: { tabindex: "1" } }
        ],

        change: function() {
            var selectedDataItem = this.dataItem(this.select());
            if (PageState.Selected.TestRuleResult !== selectedDataItem.TestRuleResult) {
                PageState.Selected.TestRuleResult = selectedDataItem.TestRuleResult;
                testRuleResultsSelectionChanged();
            }
        },
        editable: false
    });
    // Add vertical scroll bars
    $(IDS.testRuleResultsGrid + " .k-grid-content").css({
        "overflow-y": "scroll"
    });
    Grids.TestRuleResultsGrid = $(IDS.testRuleResultsGrid).data('kendoGrid');
}

function execTestRule(uwi) {
    $.ajax({
        type: 'POST',
        url: "ExecuteTestRule",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
            ruleId: PageState.Selected.RuleId,
            ruleSql: PageState.SqlEditor.RuleSql.getValue(),
            uwi: "'" + uwi + "'",
            parameters: PageState.RuleParameters
        }),
        schema: {
            errors: function(response) {
                return response.error;
            },
            data: function(response) {
                return response.result;
            },
            total: function(response) {
                return response.rowCount;
            }
        },
        success: function(matchedUwiList) {
            PageState.TestRuleResult = matchedUwiList.result;

            var dataSource = new kendo.data.DataSource({
                pageSize: 500,
                data: matchedUwiList.result,
                serverPaging: true
            });
            Grids.TestRuleResultsGrid.setDataSource(dataSource);
            PageState.Selected.ChildUwi = null;
            updateButtonStates();
        },
        error: function(e) {
            var errorObject = JSON.parse(e.xhr.responseText);
            var errorMessage = errorObject.Message;

            //clear old error message 
            Grids.TestRuleResultsGrid.clearErrorMessage("error-message");

            // add new error message
            Grids.TestRuleResultsGrid.addErrorMessage("error-message", errorMessage);
        }
    });
}

明明数据源中有serverPaging = true。我错过了什么？我是否需要以某种方式在我的 JavaScript 代码中使 pageSize 动态化？ TIA.

更新：

感谢您的反馈，@Brett。这就是我按照您的建议简化代码的方式。如何删除 ajax 部分之外的 success: 函数？

function execTestRule(uwi) {
    $.ajax({
        type: 'POST',
        url: "ExecuteTestRule",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
            ruleId: PageState.Selected.RuleId,
            ruleSql: PageState.SqlEditor.RuleSql.getValue(),
            uwi: "'" + uwi + "'",
            parameters: PageState.RuleParameters
        }),
        success: function(matchedUwiList) {
            PageState.TestRuleResult = matchedUwiList.result;

            var dataSource = new kendo.data.DataSource({
                schema: {
                    data: 'results',
                    total: 'rowCount'
                },
                pageSize: 500,
                serverPaging: true
            });
            Grids.TestRuleResultsGrid.setDataSource(dataSource);
            PageState.Selected.ChildUwi = null;
            updateButtonStates();
        }
    });
}

当 execTestRule 函数为运行时，这是我得到的错误：

Answer 1

你的代码让我感到困惑，但我确实看到了一个特定的问题。您没有告诉 Kendo UI DataSource 您的数据和行数属性在控制器返回的对象中的位置。

在您的控制器中，您指定数据位于 response["results"] 属性，而行数位于 response["rowCount"] 属性。因此，您返回的对象如下所示：

{
  results: [...],
  rowCount: 91637
}

Kendo UI DataSource 对象的 schema，默认情况下，期望数据位于 "data" 属性和行计数（a.k.a。数据中的项目数）位于 "total" 属性中。由于您的对象不符合约定，您需要告诉数据源您的属性命名不同。

var dataSource = new kendo.data.DataSource({
  schema: {
    data: 'results',
    total: 'rowCount'
  },
  pageSize: 500,
  serverPaging: true
});

因此，您可能会说您已经在这样做了，但是看看您在哪里定义了它。您在 $.ajax() 调用中定义了它。那是不正确的。 $.ajax() 函数不关心 schema。 Kendo UI 数据源。

Kendo UI DataSource API reference

jQuery $.ajax API reference

Answer 2

正如@Brett 所解释的那样，通过将模式从 $.ajax() 调用中取出来解决了问题。此外，开始在数据源中使用传输：

$.widget("myViewGrid", {
        // ...
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "{0}/ViewDataById".format(options.controllerUri),
                    type: "get",
                    dataType: "json",
                    data: {
                        viewId: view.viewId,
                        Id: options.Id
                    }
                }
            },
            schema: {
                data: "mydata",
                total: "total",
                model:dataSourceModel
            },
            pageSize: view.pageSize,
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true
        });
        // ...
 });

分页不移动到 kendogrid 中的新数据

paging not moving to new data in kendogrid

javascript

jquery

asp.net-mvc-4

kendo-grid