我们在使用Spring MVC框架开发前端项目的时候,难免会遇见需要分页查询的时候,即根据不同的操作指令分页显示其查询出来的数据,防止点击下一页时数据显示就不是该指令操作查询出来的数据,变为了正常查询出来的数据。本文我们就来详细地讲一讲Spring MVC实现分页查询。
Spring MVC实现分页查询的过程其实就是一些参数的传输,无论哪种操作,只要保证点击分页按钮时再把该操作的条件参数传到后台,后台根据获取到的参数进行查询,返回查询到的数据就行。要保证每个不同操作点击下一页传输相应的查询参数就得每次操作后都要把传输到后台的数据进行回显到前端页面,保存起来,等再点击分页按钮时,获取该参数再传输到后台。
下面我们看下具体实现步骤:
1.前端页面:
<div class="widget widget_search">
<form class="navbar-form" action="<%=request.getContextPath()%>/user/selectPage" method="post">
<div class="input-group">
//用于保存操作的回显数据
<input type="hidden" name="user_id" id="user_id" value="${page.userid}"/>
<input type="hidden" name="other_id" id="other_id" value="${page.otherid}"/>
<input type="text" name="keyWord" id="keyword" value="${page.keyWord}" class="form-control" size="35" placeholder="请输入关键字" maxlength="15" autocomplete="off">
<span class="input-group-btn">
<select name="keyType" id="key_type" class="btn btn-default btn-search">
<option value="userid" <c:if test="${page.keyType=='userid'}">selected="selected"</c:if> >userid</option>
<option value="content" <c:if test="${page.keyType=='content'}">selected="selected"</c:if> >content</option>
</select>
</span>
<span class="input-group-btn">
<button class="btn btn-default btn-search" name="search" type="submit" onclick="search()">搜索</button>
</span>
</div>
</form>
</div>
<div class="more">
<a href="<%=request.getContextPath()%>/user/selectPage" title="全部分享" >全部分享</a>
<a href="<%=request.getContextPath()%>/user/selectPage?otherid=user10@qq.com" title="别人的分享" >别人的分享</a>
<a href="<%=request.getContextPath()%>/user/selectPage?userid=user10@qq.com" title="我的分享" >我的分享</a>
<a href="<%=request.getContextPath()%>/user/publishContent" title="发布分享" >发布分享</a>
</div>
<nav class="pagination" >
<ul>
<li id="present" value="${page.page}">当前页:${page.page}</li>
<li class="active"><a onclick="selectPage(1)>1</a></li>
<li class="pages" ><a id="pres" id="${page.page-1}" onclick="selectPage(this.id)">上一页</a></li>
<li class="pages" ><a id="next"id="${page.page+1}" onclick="selectPage(this.id)">下一页</a></li>
<li class="active"><a onclick="selectPage(${page.totalPage})>尾页</a></li>
<li><span>共 ${page.totalPage}页</span></li>
</ul>
</nav>
2.用jquery来保证每个操作的参数传输
由于现在的项目都注重数据的安全性,不想要别人知道传输的数据,可以用post.
//用post方式把数据传到后台springmvc
function httpPost(URL,PARAMS) {
var temp=document.createElement("form");
temp.action=URL;
temp.method="post";
temp.style.display="none";
for(var x in PARAMS){
var opt=document.createElement("input");
opt.name=x;
opt.value=PARAMS[x];
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
}
//删除的操作
function deleteContent(id) {
var params={
id:id
};
//springmvc后台接收的路径
var url='deleteContent';
httpPost(url,params);
}
//分页的操作
function selectPage(id) {
//模糊查询的类型
var keyType=$("#key_type option:selected").val();
//进行模糊查询的关键字
var keyword=$("#keyword").val();
//当前用户的id,用来查询我的分享
var userid=$("#user_id").val();
//用来记录别人分享的id,用来查询别人的分享
var otherid =$("#other_id").val();
//获取当前的页数
var page=$("#present").val();
//传到后端的页数
var pages;
if(id=='pres'){
pages=page-1;
}else{
pages=page+1;
};
var params={
keyType:keyType,
keyWord:keyword,
userid:userid,
otherid:otherid,
page:pages
};
//springmvc后台接收的路径
var url='selectPage';
httpPost(url,params);
}
3.Spring MVC接收数据,进行查询操作
/**
* 分页查询
* @param page
* @param model
* @return
*/
@RequestMapping("/selectPage")
public String selectPage(Page page,Model model){
System.out.println("selectpage:"+page.toString());
ListlistContent=contentService.selectPageList(page);
if (listContent!=null&&listContent.size()>0){
for ( Content content:listContent){
System.out.println(content.toString());
}
}
int totals=contentService.selectPageCount(page);
page.setTotalRecord(totals);
System.out.println("page:"+page.toString());
model.addAttribute("listContent",listContent);
model.addAttribute("page",page);
return "index";
}
4.用Page类封装要进行分页的参数
package net.stxy.one.model; import java.io.Serializable; import java.util.HashMap; import java.util.List; import java.util.Map; /** * 处理分页 * Created by ASUS on 2018/5/7 * * @Authod Grey Wolf */ public class Page implements Serializable { //当前页 private Integer page=1; //页大小 private Integer rows=5; // 总记录 数 private Integer totalRecord; //总页数 private Integer totalPage; //关键字类型 private String keyType; //查询关键字 private String keyWord; //开始记录位置 private Integer start; //用户id private String userid; //其他用户id private String otherid; public String getKeyType() { return keyType; } public void setKeyType(String keyType) { this.keyType = keyType; } public String getOtherid() { return otherid; } public void setOtherid(String otherid) { this.otherid = otherid; } public String getUserid() { return userid; } public void setUserid(String userid) { this.userid = userid; } public Integer getPage() { return page; } public void setPage(Integer page) { this.page = page; } public Integer getRows() { return rows; } public void setRows(Integer rows) { this.rows = rows; } public Integer getTotalRecord() { return totalRecord; } public void setTotalRecord(Integer totalRecord) { this.totalRecord = totalRecord; } public Integer getTotalPage() { totalPage=(totalRecord-1)/rows+1; return totalPage; } public void setTotalPage(Integer totalPage) { this.totalPage = totalPage; } public String getKeyWord() { return keyWord; } public void setKeyWord(String keyWord) { this.keyWord = keyWord; } public Integer getStart() { start=(page-1)*rows; return start; } public void setStart(Integer start) { this.start = start; } public Page() { } public Page(Integer page, Integer rows, Integer totalRecord, Integer totalPage, String keyType, String keyWord, Integer start, String userid, String otherid) { this.page = page; this.rows = rows; this.totalRecord = totalRecord; this.totalPage = totalPage; this.keyType = keyType; this.keyWord = keyWord; this.start = start; this.userid = userid; this.otherid = otherid; } @Override public String toString() { return "Page{" + "page=" + page + ", rows=" + rows + ", totalRecord=" + totalRecord + ", totalPage=" + totalPage + ", keyType='" + keyType + '\'' + ", keyWord='" + keyWord + '\'' + ", start=" + start + ", userid='" + userid + '\'' + ", otherid='" + otherid + '\'' + '}'; } } 4.根据参数不同查询不同的数据,mapper的SQL语句:
<!-- 通过条件分页查询,返回数据集 -->
<select id="selectPageList" parameterType="net.stxy.one.model.Page" resultMap="BaseResultMap" >
select
<include refid="Base_Column_List" />
from content
<where>
<if test="userid!=null and userid !=''">AND userid = #{userid}</if>
<if test="otherid!='' and otherid!=null">AND userid not in ( select DISTINCT userid FROM content where userid = #{otherid} )</if>
<if test="keyWord!='' and keyType=='userid' ">
AND userid like '%' #{keyWord} '%'
</if>
<if test="keyWord!='' and keyType=='content' ">
AND content like '%' #{keyWord} '%'
</if>
</where>
order by id DESC
limit #{start},#{rows}
</select>
<!-- 通过条件分页查询,返回总记录数 -->
<select id="selectPageCount" parameterType="net.stxy.one.model.Page" resultType="java.lang.Integer">
select count(1) from content
<where>
<if test="userid!=null and userid !=''">AND userid = #{userid}</if>
<if test="otherid!='' and otherid!=null">AND userid not in ( select DISTINCT userid FROM content where userid = #{otherid} )</if>
<if test="keyWord!='' and keyType=='userid' ">
AND userid like '%' #{keyWord} '%'
</if>
<if test="keyWord!='' and keyType=='content' ">
AND content like '%' #{keyWord} '%'
</if>
</where>
</select>
以上就是整个Spring MVC实现分页查询的过程,尽管涉及到了大量的代码,但总体来说还是很好理解的,主要还是数据参数的传输过程和分页查询的操作实现。当然,在Spring MVC中还有许多需要实现的功能,这些在本站的Spring MVC视频教程中都有讲解,欢迎小伙们前去观看学习。
QCode09-04 14:38
Code大师09-04 14:50
不写代码你养我啊08-23 11:14
不写代码你养我啊09-17 18:02
要学习了06-18 18:13