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>
 

<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>

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,
	});
}
 

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");
 

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;
	}

/**
	 * 降水 查詢圖 日查詢 所有站點
	 * @param map
	 * @return list
	 */
	public PageInfo dayAllQuery(Map map);

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;
	}

/**
	 * 降水 查詢圖 日查詢 所有站點
	 * @param map
	 * @return list
	 */
	PageInfo dayAllQuery(Map map);

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

<!-- 降水 查詢圖 日查詢 所有站點 -->
	<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>