设置 rowNum 属性后，pager 属性不起作用

Question

我是使用 jqGrid 的新手！当以表格的形式显示数据时，我将 rowNum 属性设置为显示 5 行，但是当我这样做时，分页{pager: true} 停止工作。

这里是 jqGrid 函数和正在显示的数据以及正在显示的不正确的表格。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
    @*<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />*@
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>

    <script>

        $(function () {
            "use strict";
         $("#table").jqGrid({

            url: '@Url.Action("Data","Cart")',
            mtype: "GET",
            datatype: "json",
            
            colModel: [
                { name:"ID", label:"ID", width: 150 },
                { name:"Name", label:"Product", width:150 },
                { name:"Description", label:"Description", width: 150 },
                { name:"Price", label:"Price", width: 150 }
             ],
             guiStyle: "bootstrap4",
            viewrecords: true,
             toppager: true,
             pager: true,
             rowNum: 5,
             rowList: [10, 20, 30],
             rownumbers: true,
            caption: "Products Table",
         });
            /*jQuery("#table").setGridParam({ rowNum: 10 }).trigger("reloadGrid");*/
            $("#table").jqGrid('navGrid', { edit: true, add: true, delete: true });
        });
    </script>

This is the displayed table with pagination not working!

This is the Data to be Displayed

Json 数据： {"rows":[{"ID":1,"Name":"watch","Description":"一件手戴式","Price":500},{"ID":2,"Name ":"clothes","Description":"一件让你多姿多彩的衣服","Price":1000},{"ID":3,"Name":"shoes","Description":"一件适合你的衣服英尺","价格":20000},{"ID":6,"名称":"xyz","描述":"xxgxvb","价格":0},{"ID":12,"名称" :"V 领 T 恤","描述":"Pellentesque 居民 morbi tristique senectus et netus et malesuada 名声 ac turpis egestas。Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.","Price":5326},{"ID":16,"Name":"hoodie","Description":"Pellentesque habitant morbi tristique senectus et netus et malesuada 名声 ac turpis egestas。Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.","价格":第3234章，{"ID":21,"姓名":"豆豆”，“描述”：“Pellentesque 居民 morbi tristique senectus et netus et malesuada 成名 ac turpis egestas。 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante。 Donec eu libero 坐在amet quam egestas semper。 Aenean ultricies mi vitae est. Mauris placerat eleifend leo.","Price":200},{"ID":22,"Name":"Belt","Description":"一个经典的穿搭，让你保持极限", "Price":345},{"ID":23,"Name":"Cap","Description":"脱发，保住尊严","Price":243},{"ID":24 ,"名称":"太阳镜","描述":"增加你的风格","价格":100},{"ID":25,"名称":"长袖 T 恤","描述":"Pellentesque 居民morbi tristique senectus et netus et malesuada 成名 ac turpis egestas。 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante。 Donec eu libero 坐在amet quam egestas semper。 Aenean ultricies mi vitae est. Mauris placerat eleifend leo.","Price":243},{"ID":26,"Name":"Single","Description":"Pellentesque habitant morbi tristique senectus et netus et malesuada Famouss ac turpis egestas。 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante。 Donec eu libero 坐在amet quam egestas semper。 Aenean ultricies mi vitae est. Mauris placerat eleifend leo.","Price":243},{"ID":27,"Name":"thongs","Description":"Pellentesque habitant morbi tristique senectus et netus et malesuada Famouss ac turpis egestas。 Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante。 Donec eu libero 坐在amet quam egestas semper。 Aenean ultricies mi vitae est. Mauris placerat eleifend leo.","Price":2342},{"ID":28,"Name":"Red Shirts","Description":"Oooo LAlala","Price":3242 },{"ID":29,"Name":"Logo Collection","Description":"best Thing to Have ","Price":325333},{"ID":30,"Name":"pushkar" ,"Description":"值得购买","Price":20000},{"ID":31,"Name":"yam","Description":"一件可穿戴在手上","Price":10 }]}

Answer 1

之所以如此，是因为您在 json 响应中为 total 属性（总页数）设置了错误的值。 See docs 你的回复应该是这样的：

编辑

根据您错过的回复，放置总计、页面和记录属性

例如，您的表中有 500 条记录，并且您希望对每页 10 条记录进行分页。在这种情况下，服务器的响应应如下所示：

{
    "records": "500", // the total records in table
    "total": 50, // total pages based on the nomber of rows
    "page" : 1, // current page
    "rows" : [
         {"ID":1,"Name":"watch","Description":"A piece of wearable on hands","Price":500},
         {"ID":2,"Name":"clothes","Description":"a peice to show colorful you","Price":1000},
          ...] // current data of 10 records
}