jqGrid的分页

1、先导入三个jar包

2、再导入两个css文件

3、最后导入三个js文件

4、jsp里引入css和js文件，注意先后顺序

[html] view plaincopy

<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" media="screen"/>
<link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css" media="screen"/>
<script type="text/javascript" src="js/jquery-2.1.1.min.js">script>
<script type="text/javascript" src="js/grid.locale-cn.js">script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js">script>

5、在jsp里写一个存放表格数据的table和div

[html] view plaincopy

<div id='tableDay'
                    style="float: left; width: 780px; margin: 0 15px 0 13px;">
                    <table id="tableListDay" style="width: 780px;">table>
                    <div id="tablePagerDay" style="width: 780px;">div>
                div>

6、在自己的js里封装好方法

[html] view plaincopy

function loadDayGrid(day_URL){

    $('#tableDay').show();
    $.jgrid.defaults.styleUI="Bootstrap";
    $("#tableListDay").jqGrid({
        url : day_URL,
        datatype : "json",
        jsonReader: {
            root: "list",
            //page: "currpage",
            total: "pages"
            //records: "totalrecords",
            //cell: "invrow"
            //id: config.dataIdKey
     },
        colNames : [ '站点', '年', '月', '日', '降水量' ],
        colModel : [ {
            name : 'c_STATION_NAME',
            index : 'c_STATION_NAME',
            align : "center",
            width : 100
        }, {
            name : 'YEAR',
            index : 'YEAR',
            align : "center",
            width : 100
        }, {
            name : 'MONTH',
            index : 'MONTH',
            width : 100,
            align : "center"
        }, {
            name : 'DAY',
            index : 'DAY',
            width : 100,
            align : "center"
        }, {
            name : 'AVG',
            index : 'AVG',
            width : 130,
            align : "center"
        } ],
        viewrecords : true,
        shrinkToFit : true,
        rownumbers: true,
        autowidth: true,
        autoScroll: true,
        multiselect: true,
        rowList: [50, 100, 200, 400, 600],
        hidegrid: false,
        rowNum : 50,
        pager : '#tablePagerDay',
        width : 700,
        height : 400,
    });
}

调用此方法并重新加载jqGrid

[html] view plaincopy

var dayUrl = 'dayAllTableRain.action?beginyear=' + beginyear
                + '&endyear=' + endyear + '&month=' + month
                + '&day=' + day;
                loadDayGrid(dayUrl);
                $("#tableListDay").jqGrid('setGridParam', {
                    url : dayUrl,
                    datatype : "json",
                    mtype : "get",
                }).trigger("reloadGrid");

7、在action里写好请求地址对应的方法

[java] view plaincopy

public String dayAllTableRain(){
        try {
            HttpServletRequest req = ServletActionContext.getRequest();
            HttpServletResponse response = ServletActionContext.getResponse();
            response.setCharacterEncoding("UTF-8");
            req.setCharacterEncoding("UTF-8");
            int page=0;
            int rows=0;
            try{
                 page=Integer.parseInt(req.getParameter("page"));
                 rows=Integer.parseInt(req.getParameter("rows"));
            }catch(Exception e){
                e.printStackTrace();
            }
            String beginyear = req.getParameter("beginyear");
            String endyear = req.getParameter("endyear");
            String month = req.getParameter("month");
            String day = req.getParameter("day");
            Map map = new HashMap();
            map.put("beginyear", beginyear);
            map.put("endyear", endyear);
            map.put("month", month);
            map.put("day", day);
            map.put("rows", rows);
            map.put("page", page);
            PageInfo pageInfo = this.hRainService.dayAllQuery(map);
            PrintWriter writer = response.getWriter();
            JSONObject jsondata = JSONObject.fromObject(pageInfo);
            writer.print(jsondata.toString());
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

8、接口dao里代码

[java] view plaincopy

/**
     * 降水 查询图 日查询 所有站点
     * @param map
     * @return list
     */
    public PageInfo dayAllQuery(Map map);

实现类daoImpl里代码

[java] view plaincopy

public PageInfo dayAllQuery(Map map) {
        //获取第page页，rows条内容，默认查询总数count
        int rows =Integer.parseInt(map.get("rows").toString());
        int page =Integer.parseInt(map.get("page").toString());
        SqlSession sqlSession=this.getSqlSession();
        if(rows!=0&&page!=0){
            PageHelper.startPage(page,rows);
        }else{

        }
        List list=sqlSession.selectList("dayAllQuery",map);
        PageInfo pageInfo = new PageInfo(list);
        return pageInfo;
    }

接口serivce里代码

[java] view plaincopy

/**
     * 降水 查询图 日查询 所有站点
     * @param map
     * @return list
     */
    PageInfo dayAllQuery(Map map);

实现类serviceImpl里代码

[java] view plaincopy

public PageInfo dayAllQuery(Map map) {
        return hRainInfoDao.dayAllQuery(map);
    }

9、mapper.xml里代码

[html] view plaincopy

    <select id="dayAllQuery" parameterType="map" resultType="HRainInfo">

        select avg(r.hour24r) avg,r.year,r.month,r.day,s.c_station_name from
         T_JS_OBT_HOUR_RAIN r,t_js_cd_station s ,nuist_cd_station_code n
        where r.year between #{beginyear} and #{endyear} and r.month=#{month} and r.day=#{day}
         and r.obtid=s.v01000 and s.c_county_code=n.c_county_code and n.c_county_code=320111
         group by r.year,r.month,r.day,s.c_station_name
         ]]>
    select>

所需的导入jar包，css文件，js文件到http://down.51cto.com/data/2127956下载。