SpringMVC+Maven+MyBatis项目JSP页面分页处理

最新推荐文章于 2021-09-22 22:42:57 发布

原创最新推荐文章于 2021-09-22 22:42:57 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #JSP #分页

本文介绍了如何在SpringMVC、Maven和MyBatis项目中实现JSP页面的分页处理。通过创建SearchModel和Pager类，设置DAO和服务层接口，以及在Controller中编写SQL查询，最终在JSP页面展示分页结果。

1、建立一个SearchModel类和Pager<T>类，分别作为查询基类，存储每页信息，和分页操作类；

public class SearchModel<T> {
	//页数
	private int page;
	//每页行数
	private int rows;
	//get和set方法
}

</pre><pre class="java" name="code"><div>public class Pager<T> {
</div><div> //总行数
 private int total;
 //数据列表
 private List<T> rows;</div><div>
</div><div> public Pager(){
  
 }
 public Pager(List<T> list){
</div><div>  this.total = ((PageList<T>)list).getPaginator().getTotalCount();
  this.rows = list;
 }
 
 public Pager(List<T> rows,int total){
  this.rows = rows;
  this.total = total;
 }</div><div>  //get和set方法
</div>

2、写自己的页面信息Model继承SearchModel类，将页面所需要信息，比如输入的查询信息、下拉框的选择信息等；

<pre class="java" name="code">public class TitleTalentModel extends SearchModel<TitleTalent> {
	private String message;				//查询框输入信息
	private String name;				//姓名
	private String idCardNo;			//身份证

//get和set方法

3、在dao层写获取数据列表的接口，返回List<T>类型，传入Model和PageBounds；

List<TitleTalent> getTitleTalentList(@Param("model")TitleTalentModel model, PageBounds pageBounds);

4、在Service层中，写获取数据列表接口，返回Pager<T>类型，传入Model；

Pager<TitleTalent> getTitleTalentList(TitleTalentModel titleTalentModel);

5、实现Service层接口，调用DAO层方法；

public Pager<TitleTalent> getTitleTalentList(TitleTalentModel model) {
		List<TitleTalent> titleTalentList = titleTalentDAO.getTitleTalentList(model, model.getPageBounds(""));
		return new Pager<TitleTalent>(titleTalentList);
	}

6、在Controller中，写获取信息的sql；

	<select id="getTitleTalentList" resultMap="baseMap">
		SELECT 
			t1.id,t1.name,t1.id_card_no,t1.gender,
			t1.work_org,t1.professional_title,t1.certificate_no,
			t1.pro_skill_level,t2.name as name1,t1.obtain_date
		FROM 
			t_tims_title_talent t1
		LEFT JOIN 
			t_tims_dictionary t2
		ON 
			t1.pro_skill_level = t2.`code`
		WHERE 
			t2.type_code = 'PRO_SKILL_LEVEL' 
			<if test="model.name != null and model.name != ''">
				and t1.name like CONCAT('%', #{model.name}, '%')
			</if>
			<if test="model.idCardNo != null and model.idCardNo != ''">
				and t1.id_card_no like CONCAT('%', #{model.idCardNo}, '%')
			</if>
			<if test="model.professionalTitle != null and model.professionalTitle != ''">
				and t1.professional_title like CONCAT('%', #{model.professionalTitle}, '%')
			</if>
			<if test="model.certificateNo != null and model.certificateNo != ''">
				and t1.certificate_no = #{model.certificateNo}
			</if>
	</select>

注意在使用参数的时候前面加上参数所属的类名，如model.name；

7、写JSP页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>职称人才汇总数据</title>
<script type="text/javascript">
 	function viewDetail(id){
		window.location.href="${pageContext.request.contextPath}/talentManage/"+id+"/talentDetail?detail=10441";
	}
	function toEdit(id){
		window.location.href="${pageContext.request.contextPath}/talentManage/"+id+"/toEdit?edit=11246";
	}
</script>
</head>
<body>
<input type="hidden" name="lastPage" id="lastPage" value="1"/>
<input type="hidden" name="type" id="type" value=""/>
		<!-- content start -->
			<div class="admin-content-body">
				<div class="am-cf am-padding am-padding-bottom-0">
					<div class="am-fl am-cf">
						<strong class="am-text-primary am-text-lg">
						职称人才列表
						</strong>
					</div>
					<div align="right"><a href="<%=basePath %>titleTalent/toAdd">+新增人才</a></div>
				</div>

				<hr>
				<select id="type" data-am-selected="{btnSize: 'sm',btnWidth: '120px'}" style="display: none;">
					<option value="0" selected="selected">姓名</option>
					<option value="1">现专业技术职务资格</option>
					<option value="2">资格证书编号</option>
				</select>
					<input type="text" id="message">
					<button class="am-btn am-btn-default" type="button" id="searchBtn">搜索</button>
				
				<div class="am-g">
					<div class="am-u-sm-12">
							<table id="tlListTable"
								class="am-table am-table-striped am-table-hover table-main">
								<thead>
									<tr>
										<th class="table-title">编号</th>
										<th class="table-title">姓名</th>
										<th class="table-title">身份证号</th>
										<th class="table-title">性别</th>
										<th class="table-title">工作单位</th>
										<th class="table-title">现专业技术职务资格</th>
										<th class="table-title">资格证书编号</th>
										<th class="table-title">职称级别</th>
										<th class="table-title">证书取得时间</th>
										<th class="table-set">操作</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
							<div class="am-cf" id="page_area">
							<span id="page_rows"></span>
								<div class="am-fr">
									<ul class="am-pagination">
									</ul>
								</div>
							</div>
							<hr>
					</div>
				</div>
			</div>

		<!-- content end -->
<script type="text/javascript">
function toUpdate(id) {			//前往修改页面
	window.location.href="<%=basePath %>titleTalent/getTitleTalentById/"+id;
}
function toDelete(id) {			//前往删除页面
	window.location.href="<%=basePath %>titleTalent/titleTalentDelete/"+id;
}

$(
	function(){
		var last_page  = $("#lastPage").val()-0;					//最后一页
		var type = $("#type").val().trim();							//搜索类型
		$("#type").val(type);
		var message = $("#message").val();							//搜索条件
		
		var TitleTalent = function(){
			this.data = {
				page:last_page						//页数
				,rows:10							//每页显示
				,type:type							//类型
				,message:message					//条件
			};
			this.loadNetData();			//调用loadNetData()方法
			this.onEvent();				//调用onEvent()方法
		}
		
		$.extend(TitleTalent.prototype,{
			loadNetData:function(){
				var me = this;
				//记住上一页
				$("#lastPage").val(me.data.page);
				$("#type").val(me.data.type);
				//分页区域隐藏
				$("#page_area").hide();		//指定画表区域
				$.ajax({
					url:"/titleTalent/gettitleTalentList",		//调用获得列表的controller方法
					data:me.data,
					success:function(data){										//画表
						var tpl = '<tr><td colspan="10">暂无数据</td></tr>'		//设置tpl用于存储html页面源码
						var rows = data.rows;
						if(rows != null && rows.length>0){	//当有数据时
							tpl = '';						//将tpl设置为空
							var map  = {0:"姓名",1:"现专业技术职务资格",2:"资格证书编号"}	//和前面的选项有关，还不明白干嘛的
							for(var i = 0; i<rows.length; i++){
								var itm = rows[i];
								tpl += '<tr>';
								tpl += '<td class="am-hide-sm-only">' + itm.id + '</td>';
								tpl += '<td class="am-hide-sm-only">' + itm.name + '</td>';
								tpl += '<td class="am-hide-sm-only">' + itm.idCardNo + '</td>';
								tpl += '<td class="am-hide-sm-only">' + itm.gender + '</td>';
								tpl += '<td class="am-hide-sm-only">' + itm.workOrg + '</td>';
								tpl += '<td class="am-hide-sm-only">' + itm.professionalTitle + '</td>';
								tpl += '<td class="am-hide-sm-only">' + itm.certificateNo + '</td>';
								tpl += '<td class="am-hide-sm-only">' + itm.name1 + '</td>';
								tpl += '<td class="am-hide-sm-only">' + itm.obtainDateStr + '</td>';
								
								var onclick_update = 'onclick="window.location.href=\'/titleTalent/getTitleTalentById/'+itm.id+'\'"';

								tpl += '<td class="am-hide-sm-only">'+
								'<input type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" value="修改"'
								+ onclick_update
								+'/>'
								
								tpl += ' ';
								
								var onclick_delete = 'onclick="window.location.href=\'/titleTalent/titleTalentDelete/'+itm.id+'\'"';
								
								tpl += '<input type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" value="删除"'
								+ onclick_delete
								+'/>'
								
								+'</td>';
								tpl += '</div></div></td></tr>'
							}
							me.onPageEvent(data);
						}
						$("#tlListTable tbody").html(tpl);
					},
				});
			},
			onEvent:function(){
				var me = this;
				$("#searchBtn").click(function(){				//当搜索时执行
					     me.data.page=1;
     					     var type = $("#stype").val();
     					     switch(type){
   		  				case "0":me.data.name = $("#message").val().trim();break;
     						case "1":me.data.professionalTitle = $("#message").val().trim();break;
     						case "2":me.data.certificateNo = $("#message").val().trim();break;
     					}
     me.data.message = $("#message").val().trim();
     me.loadNetData();
				});
			},
			onPageEvent:function(data){
				var me = this;
				$("#page_area").show();
				var rows = me.data.rows;
				var total = data.total;
				var pageCount = Math.ceil(total/rows);
				$("#page_rows").html("共"+total+"条记录，"+pageCount+"页");
				
				var page = me.data.page;
				
				var pageTpl = '<li page="1"><a href="javascript:void(0);">首页</a></li>'+
				'<li page="'+(page-1)+'"><a href="javascript:void(0);">上一页</a></li>';
				var begin = 1;
				var end = pageCount;
				if(pageCount <= 5){
					
				}else if(page < 4){
					end = 5;
				}else if(page > pageCount-3){
					begin = pageCount-4;
				}else{
					begin = page - 2;
					end = page + 2;
				}
				for(var i = begin; i <= end; i++){
					pageTpl += '<li page="'+i+'"';
					if(page == i){
						pageTpl += ' class="am-active"';
					}
					pageTpl += '><a href="javascript:void(0);">'+i+'</a></li>';
				}
				
				var nextPage = Number(page)+1;
				
				pageTpl += '<li page="'+nextPage+'"><a href="javascript:void(0);">下一页</a></li>'+
				'<li page="'+pageCount+'"><a href="javascript:void(0);">末页</a></li>';
				
				$("#page_area ul.am-pagination").html(pageTpl);
				
				$("#page_area li[page]").click(function(){
					var targetPage = $(this).attr("page");
					if(targetPage>=1&&targetPage<=pageCount&&targetPage!=page){
						me.data.page = targetPage-0;
						me.loadNetData();
					}
				});
			}
		});
		window.titleTalent = new TitleTalent();
	}
);
</script>
</body>
</html>