jqGrid的分页

来源：互联网发布：泡妞软件下载编辑：程序博客网时间：2024/04/27 19:27

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条内容，默认查询总数countint 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 nwhere 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下载。

2 0