Question

我正在尝试在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);
 }

谁能告诉我为什么分页不适合我？

Answer 1

我使用的JqGrid对我来说很好，希望它可以帮助你找到问题

确保加载必要的Jquery文件
正确加载Grid.locale文件

如果您仍然无法在Google Chrome中进行分页调试请参阅“控制台”选项卡如果您错过了任何内容，则会发现错误

`

    jQuery(document).ready(function() {
        jQuery("#list").jqGrid({
            url: '/EmployeeWiseReport/GetGridData/',
            datatype: 'json',
            mtype: 'GET',
            width: 600,
            colNames: ['Employee Id', 'UserName', 'MobileNo', 'EmailId', 'NOofChild', 'ChildName'],
            colModel: [
              { name: 'UserId', index: 'UserId', align: 'left' },
              { name: 'UserName', index: 'UserName', align: 'left' },
              { name: 'MobileNo', index: 'MobileNo', align: 'left' },
              { name: 'EmailId', index: 'EmailId', align: 'left' },
              { name: 'NOofChild', index: 'NOofChild', align: 'left' },
              { name: 'ChildName', index: 'ChildName', align: '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>

Answer 2

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

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

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

分页不适用于JQGrid

2 个答案: