jqGrid的分页

1、先导入三个jar包

2、再导入两个css文件

3、最后导入三个js文件

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

[html] view plaincopy

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

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

[html] view plaincopy

1. <div id=‘tableDay‘
2. style="float: left; width: 780px; margin: 0 15px 0 13px;">
3. <table id="tableListDay" style="width: 780px;"></table>
4. <div id="tablePagerDay" style="width: 780px;"></div>
5. </div>

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

[html] view plaincopy

1. function loadDayGrid(day_URL){
2. $(‘#tableDay‘).show();
3. $.jgrid.defaults.styleUI="Bootstrap";
4. $("#tableListDay").jqGrid({
5. url : day_URL,
6. datatype : "json",
7. jsonReader: {
8. root: "list",
9. //page: "currpage",
10. total: "pages"
11. //records: "totalrecords",
12. //cell: "invrow"
13. //id: config.dataIdKey
14. },
15. colNames : [ ‘站点‘, ‘年‘, ‘月‘, ‘日‘, ‘降水量‘ ],
16. colModel : [ {
17. name : ‘c_STATION_NAME‘,
18. index : ‘c_STATION_NAME‘,
19. align : "center",
20. width : 100
21. }, {
22. name : ‘YEAR‘,
23. index : ‘YEAR‘,
24. align : "center",
25. width : 100
26. }, {
27. name : ‘MONTH‘,
28. index : ‘MONTH‘,
29. width : 100,
30. align : "center"
31. }, {
32. name : ‘DAY‘,
33. index : ‘DAY‘,
34. width : 100,
35. align : "center"
36. }, {
37. name : ‘AVG‘,
38. index : ‘AVG‘,
39. width : 130,
40. align : "center"
41. } ],
42. viewrecords : true,
43. shrinkToFit : true,
44. rownumbers: true,
45. autowidth: true,
46. autoScroll: true,
47. multiselect: true,
48. rowList: [50, 100, 200, 400, 600],
49. hidegrid: false,
50. rowNum : 50,
51. pager : ‘#tablePagerDay‘,
52. width : 700,
53. height : 400,
54. });
55. }

调用此方法并重新加载jqGrid

[html] view plaincopy

1. var dayUrl = ‘dayAllTableRain.action?beginyear=‘ + beginyear
2. + ‘&endyear=‘ + endyear + ‘&month=‘ + month
3. + ‘&day=‘ + day;
4. loadDayGrid(dayUrl);
5. $("#tableListDay").jqGrid(‘setGridParam‘, {
6. url : dayUrl,
7. datatype : "json",
8. mtype : "get",
9. }).trigger("reloadGrid");

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

[java] view plaincopy

1. public String dayAllTableRain(){
2. try {
3. HttpServletRequest req = ServletActionContext.getRequest();
4. HttpServletResponse response = ServletActionContext.getResponse();
5. response.setCharacterEncoding("UTF-8");
6. req.setCharacterEncoding("UTF-8");
7. int page=0;
8. int rows=0;
9. try{
10. page=Integer.parseInt(req.getParameter("page"));
11. rows=Integer.parseInt(req.getParameter("rows"));
12. }catch(Exception e){
13. e.printStackTrace();
14. }
15. String beginyear = req.getParameter("beginyear");
16. String endyear = req.getParameter("endyear");
17. String month = req.getParameter("month");
18. String day = req.getParameter("day");
19. Map map = new HashMap();
20. map.put("beginyear", beginyear);
21. map.put("endyear", endyear);
22. map.put("month", month);
23. map.put("day", day);
24. map.put("rows", rows);
25. map.put("page", page);
26. PageInfo pageInfo = this.hRainService.dayAllQuery(map);
27. PrintWriter writer = response.getWriter();
28. JSONObject jsondata = JSONObject.fromObject(pageInfo);
29. writer.print(jsondata.toString());
30. } catch (Exception e) {
31. e.printStackTrace();
32. }
33. return null;
34. }

8、接口dao里代码

[java] view plaincopy

1. /**
2. * 降水 查询图 日查询 所有站点
3. * @param map
4. * @return list
5. */
6. public PageInfo dayAllQuery(Map map);

实现类daoImpl里代码

[java] view plaincopy

1. public PageInfo dayAllQuery(Map map) {
2. //获取第page页，rows条内容，默认查询总数count
3. int rows =Integer.parseInt(map.get("rows").toString());
4. int page =Integer.parseInt(map.get("page").toString());
5. SqlSession sqlSession=this.getSqlSession();
6. if(rows!=0&&page!=0){
7. PageHelper.startPage(page,rows);
8. }else{
9. }
10. List<HRainInfo> list=sqlSession.selectList("dayAllQuery",map);
11. PageInfo<HRainInfo> pageInfo = new PageInfo(list);
12. return pageInfo;
13. }

接口serivce里代码

[java] view plaincopy

1. /**
2. * 降水 查询图 日查询 所有站点
3. * @param map
4. * @return list
5. */
6. PageInfo dayAllQuery(Map map);

实现类serviceImpl里代码

[java] view plaincopy

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

9、mapper.xml里代码

[html] view plaincopy

1. <!-- 降水 查询图 日查询 所有站点 -->
2. <select id="dayAllQuery" parameterType="map" resultType="HRainInfo">
3. <![CDATA[
4. select avg(r.hour24r) avg,r.year,r.month,r.day,s.c_station_name from
5. T_JS_OBT_HOUR_RAIN r,t_js_cd_station s ,nuist_cd_station_code n
6. where r.year between #{beginyear} and #{endyear} and r.month=#{month} and r.day=#{day}
7. and r.obtid=s.v01000 and s.c_county_code=n.c_county_code and n.c_county_code=320111
8. group by r.year,r.month,r.day,s.c_station_name
9. ]]>
10. </select>

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