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

Posted 2023-05-07

【中文标题】设置 rowNum 属性后，pager 属性不起作用

【英文标题】：The pager property doesn't function once the rowNum property is set

【发布时间】：2021-09-10 10:22:36

【问题描述】：

我是使用 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 ]

【参考方案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

【讨论】：

能否请您详细说明解决方案！

我见过一些没有总数的解决方案：“总页数”属性，它们工作正常。为什么我的代码不起作用！

可能是因为您使用服务器端响应。为了确定问题，请发布您的服务器端响应

我尝试了所有方法并调试了每一件事，还手动检查了是否获取了 JSON 数据，每个位都在工作，但分页没有工作。现在我有一些不同的方法得到了分页工作，仍然很高兴知道这是什么错误导致这种情况发生

从 serevr 发布您的 json 响应，我会尝试找出问题所在。