JQGrid分页不起作用答案

【问题标题】：JQGrid pagination not workingJQGrid分页不起作用
【发布时间】：2013-11-13 05:16:37
【问题描述】：

我正在显示一个 jqgrid，其中包含可以正常工作的数据，并且正在尝试在不工作的数据之上实现分页。我在这里查看了http://trirand.com/blog/jqgrid/jqgrid.html 的示例并尝试实现相同的示例。

这很基础，但我不知道 jqgrid 是如何神奇地实现分页的。我看不到分页按钮。我也包含了 ui.jqgrid.css 文件。

在 $(document).ready 中，我调用 InitializeGrid 和 completeGrid。分页一次显示记录。例如，我将 rowNum 设为 10，但在显示时显示“查看 1-17 of 17”。相反，我希望它在第一页显示 10 条记录，在第二页显示 7 条记录。

下面是我的代码。

代码：

function InitializeGrid() { 

    jQuery("#sample").jqGrid({
        datatype: function(postdata) {

        },
        pager: '#gridpager',
        colNames: colNames,
        pgbuttons: true,
        colModel: colModel,
        hoverrows: false,
        hidegrid: false,
        shrinkToFit: true,
        altRows: true,
        scroll: true,
        viewrecords: true,
        footerrow: false,
        gridView: true,
        caption: 'Information',
        loadonce: false,
        sortable: false,
        rowNum: 10,
        cmTemplate: { title: false },
        jsonReader: {
            root: "Data",
            page: "CurrentPage",
            total: "TotalPages",
            records: "TotalRecords",
            repeatitems: false,
            id: "0"
        },
    });
}

function completeGrid(gridData) {
    gridRows = gridData;
    var grid = $("#sample ");
    grid.clearGridData();
    var addRow;
    var gridData = { Data: [], CurrentPage: 1, TotalPages: 1, TotalRecords: 1};
    for (var i = 0; i < gridRows.length; i++) {
        addRow = {
            Group: gridRows[i].Group,
            Member: gridRows[i].Member
        };
        gridData.Data.push(addRow);
    }
    for (var j = 0; j < gridRows.length; j++) {
        jQuery('#sample').addRowData( j, gridData.Data[j]);
    }
}

【问题讨论】：

标签： jquery jqgrid paging

【解决方案1】：

在我看来，您也必须在选项中指定 rowList 数组：

rowList:[10,20,30],

并尝试从 json 阅读器中删除结尾的 ',' 逗号：

jsonReader: {
        root: "Data",
        page: "CurrentPage",
        total: "TotalPages",
        records: "TotalRecords",
        repeatitems: false,
        id: "0"
    }, // <----------this comma

如果你的数据是动态的，那么你必须使用

loadOnce: true,

这是必需的。

【讨论】：

正确。分页 div 中的下拉控件填充了 rowList 数组中提供的任何选项。 rowList 数组的命名有点令人困惑，因为它真正提供的是“每页行数选项”。 rowNum 表示默认应该选择哪些 rowList 选项；本质上是“每页的初始行”。如果您希望 10 成为唯一选项，请使用 rowList:[10]。

【解决方案2】：

你需要在获取数据的同时进行分页。

Asp.net C# 中的示例代码

   //Get the page number and page size from query string.
  int iPage = int.Parse(Request.QueryString["page"]);//get the requested page
  int iLimit = int.Parse(Request.QueryString["rows"]); //get how many rows you want to display

  //Taking requires no of records for required page
 //using LINQ query.
  var Res = res.Skip((iPage - 1) * (iLimit)).Take(iLimit).ToList();

【讨论】：