时间戳

首页 > 解决方案 > 设置 rowNum 属性后，pager 属性不起作用

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

问题描述

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

这是显示的表格，分页不起作用！

这是要显示的数据

Donec eu libero 坐在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 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":3234},{"ID":21,"Name":"Beanie","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":200},{"ID":22,"Name":"Belt","Description":"一个经典的穿搭，让你保持极限", "Price":345},{"ID":23,"Name":"Cap","Description":"脱发，保住尊严","Price":243},{"ID":24 ,"名称":"太阳镜","描述":"增加你的风格","价格":100},{"ID":25,"名称":"长袖 tee","描述":"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名声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.",

标签： javascriptjqueryjquery-uijqgrid

解决方案

之所以如此，是因为您的 json 响应中的总属性（总页数）的值错误。请参阅文档您的回复应该如何：

编辑

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

例如，您在表中有 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
}

推荐阅读