jqGrid 实现分页显示2种情况(动态数据、本地数据)

小灰灰 2023-10-07 13:59 11阅读 0赞

### 1 jqGrid所需JS、CSS文件 ###

<%--jqGrid的JS、CSS--%>
    <link href="../script/jqGrid/css/jquery-ui.css" rel="stylesheet" />
    <link href="../script/jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
    <script src="../script/jqGrid/js/jquery-1.11.0.min.js"></script>
    <script src="../script/jqGrid/js/jquery.jqGrid.min.js"></script>
    <script src="../script/jqGrid/js/i18n/grid.locale-en.js"></script>

jqGrid的js、css文件百度云下载地址[https://pan.baidu.com/s/13VEyUxubJGEkARvHOhow9w][https_pan.baidu.com_s_13VEyUxubJGEkARvHOhow9w]

提取码7jdo

### 2 HTML代码 ###

### 3 JS代码 ###

#### 3.1 分页显示（绑定动态数据） ####

$(function(){
        initGrid();
    });
    function initGrid(){
        var user= JSON.parse($.cookie("loginUser"));
        $.jgrid.gridUnload("dataGrid");
        $("#dataGrid").jqGrid({
            url:"/loginLog/getLoginLogExtList",
            postData:{
                username:"123"
            },
            datatype: 'json',
            width: $(window).width()-250,
            height:$(window).height()-240,
            pgtext: "第{0}页  共 {1} 页",//页数显示格式
            pager:"#pager",//绑定分页菜单
            viewrecords: true,
            recordtext:"第 {0} - {1} 条，共 {2} 条",
            records: "total",
            rownumbers: true,//显示行号
            rownumWidth:50,
            rowNum: 20, //在grid上显示记录条数，这个参数是要被传递到后台
            rowList: [20, 30, 50],
            shrinkToFit:false,
            loadonce:true,//开启分页
            colModel:[
                {label:"用户名",name:"username",index:"username",width:"150",align:"center"},
                {label:"昵称",name:"pickname",index:"pickname",width:"150",align:"center"},
                {label:"登陆时间",name:"loginTime",index:"loginTime",width:"200",align:"center"},
                {label:"登陆城市",name:"loginArea",index:"loginArea",width:"200",align:"center"},
                {label:"ISP运营商",name:"loginIsp",index:"loginIsp",width:"100",align:"center"},
                {label:"IP",name:"loginIp",index:"loginIp",width:"150",align:"center"}
            ],
            gridComplete:function(){
                $('#dataGrid').find(">tbody>tr.jqgrow:odd").addClass("jqGridEvenClass");
            }
    
        });
    }

#### 3.2 分页显示（绑定本地数据 ） ####

有两种数据绑定方法（addJSONData和addRowData）

$(function(){
        initGrid();
    });
    function initGrid(gridData){
        var user= JSON.parse($.cookie("loginUser"));
        $.jgrid.gridUnload("dataGrid");
        $("#dataGrid").jqGrid({
            datatype: 'local',
            width: $(window).width()-250,
            height:$(window).height()-240,
            pgtext: "第{0}页  共 {1} 页",//页数显示格式
            pager:"#pager",//绑定分页菜单
            viewrecords: true,
            recordtext:"第 {0} - {1} 条，共 {2} 条",
            records: "total",
            rownumbers: true,//显示行号
            rownumWidth:50,
            rowNum: 20, //在grid上显示记录条数，这个参数是要被传递到后台
            rowList: [20, 30, 50],
            shrinkToFit:false,
            loadonce:true,//开启分页
            colModel:[
                {label:"用户名",name:"username",index:"username",width:"150",align:"center"},
                {label:"昵称",name:"pickname",index:"pickname",width:"150",align:"center"},
                {label:"登陆时间",name:"loginTime",index:"loginTime",width:"200",align:"center"},
                {label:"登陆城市",name:"loginArea",index:"loginArea",width:"200",align:"center"},
                {label:"ISP运营商",name:"loginIsp",index:"loginIsp",width:"100",align:"center"},
                {label:"IP",name:"loginIp",index:"loginIp",width:"150",align:"center"}
            ],
            gridComplete:function(){
                $('#dataGrid').find(">tbody>tr.jqgrow:odd").addClass("jqGridEvenClass");
            }
        });
        //第一种绑定数据方法
        $('#dataGrid')[0].addJSONData(gridData);
        //第二种绑定数据方法
        //for (var i = 0; i < gridData.length; i++) {
            //$("#datagrid").jqGrid('addRowData',i+1,gridData[i]);
        //}
    }

[https_pan.baidu.com_s_13VEyUxubJGEkARvHOhow9w]: https://pan.baidu.com/s/13VEyUxubJGEkARvHOhow9w