jqGrid的分页

1、先导入三个jar包

2、再导入两个css文件

3、最后导入三个js文件

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

<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

<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里封装好方法

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

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里写好请求地址对应的方法

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里代码

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

实现类daoImpl里代码

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<HRainInfo> list=sqlSession.selectList("dayAllQuery",map);
		PageInfo<HRainInfo> pageInfo = new PageInfo(list);
		return pageInfo;
	}

接口serivce里代码

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

实现类serviceImpl里代码

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

9、mapper.xml里代码

<!-- 降水 查询图 日查询 所有站点 -->
	<select id="dayAllQuery" parameterType="map" resultType="HRainInfo">
	<![CDATA[
		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://download.csdn.net/detail/sinat_31998357/9364311下载。