jqGrid的分页

1、先导入三个jar包

jqGrid的分页_第1张图片

2、再导入两个css文件

jqGrid的分页_第2张图片

3、最后导入三个js文件

jqGrid的分页_第3张图片

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






5、在jsp里写一个存放表格数据的table和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 list=sqlSession.selectList("dayAllQuery",map);
		PageInfo 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里代码


	


所需的导入jar包,css文件,js文件到 点击打开链接http://download.csdn.net/detail/sinat_31998357/9364311下载。

你可能感兴趣的:(java)