之前写的简易购物车系统,在显示图书列表的时候是全部显示出来,图书少的时候没有什么问题,但当图书数量变多的时候,一下子把全部图书显示出来会让界面看的不美观,所以就打算加个分页查询的功能
最终效果:
实现:
分页查询有几个比较重要的参数,pageNum当前的页数,pageSize每页所展示的数据,totalRecord总共有多少数据,其他的数据可以根据这三个数据得出,有了这几个数据就可以分页查询了
public class Page {
//当前的页数
private int pageNum;
//每页所展示的数据
private int pageSize;
//总共有多少数据
private int totalRecord;
//总页数
private int totalPage;
//查询数据的起始位置
private int startIndex;
//存放查询到的数据
private List<Book> booklist;
//相对的头页
private int start;
//相对的尾页
private int end;
public Page(int pageNum, int pageSize, int totalRecord) {
this.pageNum = pageNum;
this.pageSize = pageSize;
this.totalRecord = totalRecord;
if(totalRecord%pageSize == 0){
//如果刚好能够整除,则totalPage = totalRecord/pageSize
this.totalPage = totalRecord/pageSize;
}else{
//如歌不能整除,则需要多加一页显示余下的数据
this.totalPage = (totalRecord/pageSize)+1;
}
this.startIndex = (pageNum-1)*pageSize;
//初始头页
this.start = 1;
//初始尾页
this.end = 5;
if(totalPage<5){
//如果总页数小于5页,则尾页为总页数
this.end = this.totalPage;
}else{
this.start = this.pageNum-2;
this.end = this.pageNum+2;
if(this.start<0){
this.start = 1;
this.end = 5;
}
if(this.end>totalPage){
this.end = totalPage;
this.start = this.end-5;
}
}
}
//下面的为get/set方法
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalRecord() {
return totalRecord;
}
public void setTotalRecord(int totalRecord) {
this.totalRecord = totalRecord;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getStartIndex() {
return startIndex;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
public List<Book> getBooklist() {
return booklist;
}
public void setBooklist(List<Book> booklist) {
this.booklist = booklist;
}
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getEnd() {
return end;
}
public void setEnd(int end) {
this.end = end;
}
}
pageNum从请求中获得,pageSize自己设置,totalRecord通过mybatis查询获得,一开始登录的时候请求中没有pageNum,所以进行一个判断,如果没有pageNum则赋值为1
//pageNum
String pageNum = request.getParameter("pageNum") == null?"1":request.getParameter("pageNum");
//pageSize
int pageSize = 7;
//totalRecord
int totalRecord = bookMapper.BookSize();
//mybatis
<select id="BookSize" resultType="int">
select count(*) from book
</select>
有了pageNum和startIndex就可以查询到特定范围的数据,通过使用mysql的limit函数,limit有两个参数,第一个参数为起始位置,即从那开始查,第二个参数为查询范围,即查多少个,如 limit 14,7 为从第14个数据开始往后查七个。
<select id="Books" parameterType="java.util.Map" resultType="book">
select *from book limit #{startIndex},#{pageSize}
</select>
public static Page getPageUser(int pageNum,int pageSize){
SqlSession sqlSession = GetSqlSession.getSqlSession();
BookMapper bookMapper = sqlSession.getMapper(BookMapper.class);
int totalRecord = bookMapper.BookSize();
Page page = new Page(pageNum,pageSize ,totalRecord );
int startIndex = page.getStartIndex();
Map<String,Integer> map = new HashMap<>();
map.put("startIndex",startIndex );
map.put("pageSize",pageSize );
page.setBooklist(bookMapper.Books(map));
return page;
}
jsp页面:
<a href="index?pageNum=1">首页</a>
<%--当前页数为第一页--%>
<c:if test="${sessionScope.page.pageNum == 1}">
<c:forEach begin="${sessionScope.page.start}" end="${sessionScope.page.end}" step="1" var="i">
<c:if test="${sessionScope.page.pageNum == i}">
<span style="color: deeppink">${i}</span>
</c:if>
<c:if test="${sessionScope.page.pageNum != i}">
<a href="index?pageNum=${i}">${i}</a>
</c:if>
</c:forEach>
<a href="index?pageNum=${sessionScope.page.pageNum+1}">下一页</a>
</c:if>
<%--当前页数为中间页数--%>
<c:if test="${sessionScope.page.pageNum >1 && sessionScope.page.pageNum<sessionScope.page.totalPage}">
<a href="index?pageNum=${sessionScope.page.pageNum-1}">上一页</a>
<c:forEach begin="${sessionScope.page.start}" end="${sessionScope.page.end}" step="1" var="i">
<c:if test="${sessionScope.page.pageNum == i}">
<span style="color: deeppink">${i}</span>
</c:if>
<c:if test="${sessionScope.page.pageNum != i}">
<a href="index?pageNum=${i}">${i}</a>
</c:if>
</c:forEach>
<a href="index?pageNum=${sessionScope.page.pageNum+1}">下一页</a>
</c:if>
<%--当前页数为最后一页--%>
<c:if test="${sessionScope.page.pageNum == sessionScope.page.totalPage}">
<a href="index?pageNum=${sessionScope.page.pageNum-1}">上一页</a>
<c:forEach begin="${sessionScope.page.start}" end="${sessionScope.page.end}" step="1" var="i">
<c:if test="${sessionScope.page.pageNum == i}">
<span style="color: deeppink">${i}</span>
</c:if>
<c:if test="${sessionScope.page.pageNum != i}">
<a href="index?pageNum=${i}">${i}</a>
</c:if>
</c:forEach>
</c:if>
<a href="index?pageNum=${sessionScope.page.totalPage}">尾页</a>
其实这个用Ajax实现会更好,我这种写法每次都要请求整个页面,费时得很 以后时间再进行优化把哈哈哈
完整代码,在我的GitHub中:GitHub