Jquery Jqgrid中的分页问题

问题描述 投票:0回答:1

对于下面提到的Jquery-Jqgrid代码,分页不起作用。请在这里帮助我,并提出解决方案。

对于下面提到的Jquery-Jqgrid代码,分页不起作用。请在这里帮助我,并提出解决方案。

对于下面提到的Jquery-Jqgrid代码,分页不起作用。请在这里帮助我,并提出解决方案。

对于下面提到的Jquery-Jqgrid代码,分页不起作用。请在这里帮助我,并提出解决方案。

<html lang="en">
<head>
   <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/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
    <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>
    <meta charset="utf-8" />
    <title>jq-grid-1000000</title>
</head>
<body>        
    <style type="text/css">

        /* set the size of the datepicker search control for Order Date*/
        #ui-datepicker-div { font-size:11px; }
        .ui-datepicker { z-index: 2000 }

        /* set the size of the autocomplete search control*/
        .ui-menu-item {
            font-size: 11px;
        }

         .ui-autocomplete {
            z-index: 2000;
            font-size: 11px;
        }       

    </style>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>

    <script type="text/javascript"> 

        $(document).ready(function () {
            $("#jqGrid").jqGrid({
                url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
                mtype: "GET",
                datatype: "jsonp",
                page: 1,
                colModel: [
                    {   label : "Order ID",                     
                        name: 'OrderID', 
                        key: true, 
                        width: 75 
                    },
                    {
                        label: "Customer ID",
                        name: 'CustomerID',
                        width: 150
                    },
                    { 
                        label: "Order Date",
                        name: 'OrderDate',
                        width: 150,                     
                        sorttype:'date'                        
                    },                    
                    {
                        label : "Ship Name",
                        name: 'ShipName',
                        width: 150
                    },
                    {
                        label: "Freight",
                        sorttype: 'number',
                        name: 'Freight', 
                        width: 150
                    }
                ],
                loadonce: true,
                viewrecords: true,
                width: 780,
                height: "auto",
                page: 1,
                rowNum: 3,
                pager: "#jqGridPager",
                gridview: true, 
                autoencode: true
            });
            // activate the build in search with multiple option            
              $('#jqGrid').jqGrid('navGrid',"#jqGridPager", {           
                search: true, // show search button on the toolbar
                add: false,
                edit: false,
                del: false,
                refresh: true               
            },
            {}, // edit options
            {}, // add options
            {}, // delete options
            { 
                multipleSearch: true, 
                multipleGroup : true,               
            }
            );
        });

    </script>


</body>
</html>
jqgrid free-jqgrid
1个回答
0
投票

分页将不起作用,因为您使用选项loadonce:true。使用此选项,在第一个请求之后,数据类型将变为具有3条记录的本地数据,并且您没有更多的行可分页。

禁用此选项,您的分页将起作用。

© www.soinside.com 2019 - 2024. All rights reserved.