分页在 JQGrid 上不起作用答案

【问题标题】：Pagination not working on JQGrid分页在 JQGrid 上不起作用
【发布时间】：2013-12-19 13:17:06
【问题描述】：

我正在尝试在我的 jqgrid 中进行分页。这是我的代码：

<div>
    <table id="JQGridDemo"></table>
    <div id="jqFooter" style="text-align:center;"></div>
</div>

<script type="text/javascript" language="javascript">
$(document).ready(function () {
    $('#JQGridDemo').jqGrid({
        url: '@Url.Action("JQGrid")',
        datatype: "json",
        mtype: "post",
        colNames: ['ID', 'Name', 'Model', 'Cost', 'Date'],
        colModel: [{
            name: 'ID',
            index: 'ID'
        }, {
            name: 'Name',
            index: 'Name'
        }, {
            name: 'Model',
            index: 'Model'
        }, {
            name: 'Cost',
            index: 'Cost'
        }, {
            name: 'Date',
            width: '464px',
            index: 'Date'
        }],
        height: '100%',
        autowidth: true,
        shrinkToFit: false,
        pager: "#jqFooter",
        rowNum: 10,
        sortName: 'Name',
        viewRecords: true,
        sortorder: "asc",
        loadonce: true,
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            cell: "cell",
            id: "ID",
            userdata: "userdata"
        }
    });
});
</script>

我的控制器代码是

public JsonResult JQGrid() {
     AssignmentEntities entities = new AssignmentEntities();
     var gridDetail = (from list in entities.Brands select list).ToList();
     var jsonData = new {
         total = 6, page = page, records = gridDetail.Count, rows = gridDetail
     };
     return Json(jsonData, JsonRequestBehavior.AllowGet);
 }

谁能告诉我为什么分页对我不起作用？？

【问题讨论】：

我在代码中看不到任何明显的错误。可以改进它，但分页应该可以工作。您在“分页不起作用”下的确切含义是什么？你退货多少件？是否超过 10 个（参见 rowNum）？寻呼机中的“下一页”（“>”）按钮是否启用？您点击它时是否有任何错误消息？
我有 6 条记录。我将 rownum 更改为 5。前 5 条记录显示在第 1 页中。当我单击“下一页”按钮时，它不会转到下一页。
你应该告诉我的控制器代码是否正确（var jsonData = new { total = 6, page = page, records = gridDetail.Count, rows = gridDetail)
如果您使用loadonce: true，那么total、page 和records 将被忽略。您可以直接使用return Json((from list in entities.Brands select list).ToList(), JsonRequestBehavior.AllowGet);。如果您使用从服务器返回的 JSON 响应附加您的问题，则可以重现您描述的问题。您可以使用Fiddler 或开发者工具（如果是 IE（按 F12 开始））获得准确的服务器响应。
是的，你是正确的..我添加了 loadonce:true..现在它可以工作了。

标签： jquery asp.net-mvc jqgrid pagination

【解决方案1】：

我正在使用 JqGrid，这对我来说很好，希望它可以帮助您找到问题

确保已加载 Jquery 必要文件
确保 Grid.locale 文件已加载
如果您仍然无法在 Google Chrome 中进行分页调试，请查看控制台选项卡，如果您错过任何内容，您会发现错误

`
jQuery(文档).ready(函数() { jQuery("#list").jqGrid({ url: '/EmployeeWiseReport/GetGridData/', 数据类型：'json'， mtype: 'GET', 宽度：600， colNames: ['Employee Id', 'UserName', 'MobileNo', 'EmailId', 'NOofChild', 'ChildName'], col型号：[ {名称：'UserId'，索引：'UserId'，对齐：'left'}， {名称：'用户名'，索引：'用户名'，对齐：'左'}， {名称：'MobileNo'，索引：'MobileNo'，对齐：'left'}， {名称：'EmailId'，索引：'EmailId'，对齐：'left'}， {名称：'NOofChild'，索引：'NOofChild'，对齐：'left'}， {名称：'ChildName'，索引：'ChildName'，对齐：'left'}
```
        ],
        jsonReader: {
            repeatitems: false,
            root: function(obj) { return obj; },
            page: function(obj) { return 1; },
            total: function(obj) { return 1; },
            records: function(obj) { return obj.length; }
        },
        loadonce: true,
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'UserId',
        sortorder: "asc",
        viewrecords: false,
        caption: 'Employee Wise Report Information'
    }).navGrid(pager, { edit: false, add: false, del: false, refresh: true, search: false });
});
```
```
  <table id="list" class="scroll" style="height: 250px; width: 550px;" cellpadding="0"
cellspacing="0" width="80%">
```
```
 <table id="pager" class="scroll" style="text-align: center;">
 </table>
```

【讨论】：

【解决方案2】：

看着 Gowtham 的回答，我可以理解我做错了什么。我正在使用一种返回，即 json 对象位于变量内部。我希望这可以为其他用户澄清。

我的 JSON：[状态：'ok'，obj：{currpage：1，totalpages：3，totalrecords：30，行：{...}}]

jsonReader: {
                page: "obj.currpage",
                total: "obj.totalpages",
                records: "obj.totalrecords",
                repeatitems: false,
                root: "obj.rows",
                cell: "cell",
                id: "0"
            },

【讨论】：