SSM中分页的使用
在java中分页一直是我不敢触及的一部分。本次博客全面剖析一下SSM框架如何实现分页。
一、jsp页面设置分页样式
<script type="text/javascript">
//1. 点击jsp 查询全部存在书籍 分页显示
//2. 点击火爆书籍 传递过来 hot 查询hot全部书籍 分页显示
//3. 点击最新发布 传递过来 new 查询new全部书籍 分页显示
//4. 点击今日特价 传递过来 price 查询price全部书籍分页显示
var flag = ${param.flag==null};
var url = null;
if(flag==true){
url = "allBooks.action";
}
$(function(){
//页面加载完默认进首页
to_page(1);
});
function to_page(pn){
$.ajax({
type:"post",
url:url,
data:{"eachPageNumber":pn},
dataType:"json",
success:function(pbBooks){
//清空分页导航
$("#all_books").empty();
alert("总记录数"+pbBooks.totalRecord+";总分页数"+pbBooks.totalPage+"当前第几页"+pbBooks.pageNumber);
$(pbBooks.data).each(function(i,obj){
var $div01 = $("<div class='new_prod_box'>");
var $a11 = $("<a href='details.jsp?bId="+obj.bId+"'>");
var $font10 = $("<font style='color:black; font-size:12px;font-weight:bold;'>"+obj.bName+"</font>");
var $div11 = $("<div class='container1'>");
var $span10 = $("<span class='new_icon1'><img src='images/special_icon.gif' alt='' title='' /></span>");
var $div21 = $("<div class='wrap1'>");
var $div211 = $("<div class='image1'>");
var $div31 = $("<div class='display1 front1'>");
var $img30 = $("<img src='images/"+obj.bCover+"' alt='' title='作者："+obj.bAuthor+"' class='thumb' border='0' />");
var $div32 = $("</div>");
var $div41 = $("<div class='display1 back1'>");
var $img40 = $("<img src='images/"+obj.bBack+"' alt='' title='作者："+obj.bAuthor+"' class='thumb' border='0' />");
var $div42 = $("</div>");
var $div212 = $("</div>");
var $div22 = $("</div>");
var $div12 = $("</div>");
var $font50 = $("<font style='color:red;font-size:8px;'>￥</font><font style='color:red; font-size:16px;font-weight:bold;'>"+obj.bPrice+"</font>");
var $a12 = $("</a>");
var $div02 = $("</div>");
$div31.append($img30);
$div31.append($div32);
$div41.append($img40);
$div41.append($div42);
$div211.append($div31);
$div211.append($div41);
$div211.append($div212);
$div21.append($div211);
$div21.append($div22);
$div11.append($span10);
$div11.append($div21);
$div11.append($div12);
$a11.append($font10);
$a11.append($div11);
$a11.append($font50);
$a11.append($a12);
$div01.append($a11);
$div01.append($div02);
$("#all_books").append($div01);
});
var $div700 = $("<div class='clear'></div>");
var $div71 = $("<div class='article_list_more_pages'>");
var $ul71 = $(" <ul>");
var $li70 = $("<li><a id=>上一页</a></li>");
var $li80 = $("<li>共<label>"+pbBooks.totalRecord+"</label>记录</li>");
var $li90 = $("<li>共<label>"+pbBooks.totalPage+"</label>页</li>");
var $li100 = $("<li>每页显示<label>"+pbBooks.pageSize+"</label>条</li>");
var $li110 = $("<li>当前第<span>"+pbBooks.pageNumber+"</span>页 </li>");
var $li120 = $("<li><a >下一页</a></li>");
var $ul72 = $("</ul>");
var $div72 = $("</div> ");
$ul71.append($li70);
$ul71.append($li80);
$ul71.append($li90);
$ul71.append($li100);
$ul71.append($li110);
$ul71.append($li120);
$ul71.append($ul72);
$div71.append($ul71);
$div71.append($div72);
$div700.append($div71);
$("#all_books").append($div700);
//前一页 重新调用ajax所在的函数 传入参数(当前页的页数)
$li70.click(function(){
to_page(pbBooks.pageNumber-1);
});
//后一页 重新调用ajax所在的函数 传入参数(当前页的页数)
$li120.click(function(){
to_page(pbBooks.pageNumber+1);
})
}
})
};
</script>
<style type="text/css">
.article_list_more_pages {
max-width: 1100px;
margin: 0 auto;
text-align: center;
padding: 20px 0;
}
.article_list_more_pages ul {
margin: 0;
padding: 0;
display: block;
}
.article_list_more_pages li {
list-style: none;
display: inline-block;
padding: 0 0.5rem;
}
.article_list_more_pages li a {
color: #878787;
}
</style>
</head>
<body>
<div class="new_products" id="all_books"></div>
</body>
二、配置好pageBean(用于显示条数，页数等)
util包下：pageBean.java
package com.util;
import java.util.ArrayList;
public class PageBean<T> {
private int pageNumber;//1 //当前页 浏览器传递
private int pageSize; //4 //每页显示的数据(固定值) 也可以是浏览器传递
private int totalRecord; //16//总记录数 (数据库查询)
private int totalPage; //总分页数 totalpage = totalRecord%pageSize==0:totalRecord/pageSize?totalRecord/pageSize+1
private int startIndex; //开始索引
private int endIndex; //结束索引
private ArrayList<T> data; //分页数据 (数据库查询) 此时也封装进来了
public void setEndIndex(int endIndex) {
this.endIndex = endIndex;
}
//计算 最后一条记录
public int getEndIndex() {
this.endIndex = startIndex+pageSize;
return endIndex;
}
public int getPageNumber() {
/*
* 此处逻辑废弃，传递参数后在赋值 在servlet中赋值更好操作
*
* //上一页（如果当前页是第一页点击上一页的时候，当前页为0不合理所以重新赋值为第一页）
if(pageNumber<1){
pageNumber=1;
}
//下一页（如果当前页是最后一页，点击下一页的时候，当前页为最后一页+1不合理）
if(pageNumber>totalPage){
pageNumber=totalPage;
}*/
return pageNumber;
}
public void setPageNumber(int pageNumber) {
this.pageNumber = pageNumber;
}
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 ArrayList<T> getData() {
return data;
}
public void setData(ArrayList<T> data) {
this.data = data;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
//获得开始索引
public int getStartIndex() {
//开始索引计算
startIndex = (pageNumber-1)*pageSize;
return startIndex;
}
//总页数计算
public int getTotalPage() {
return totalRecord%pageSize == 0 ? totalRecord/pageSize : totalRecord/pageSize+1;
}
}
三、mapper.xml中查询数据
BooksMapper.java
//2.2.分页查询
public ArrayList<Books> selectByFyBooks(int startIndex,int endIndex);
//2.3.查询总共记录条数
public int getRecordBooks();
BooksMapper.xml
<!-- //2.2.分页查询
public ArrayList<Books> selectByFyBooks(int startIndex,int endIndex); -->
<select id="selectByFyBooks" parameterMap="allFYMapper" resultMap="books_bookTypeResult">
select b_id,u_id,b_name,b_author,b_press,b_edition,b_price,b_cover,b_back,b_time
from (select b_id,u_id,b_name,b_author,b_press,b_edition,b_price,b_cover,b_back,b_time,rownum r
from books )
where r <![CDATA[ >= ]]>#{startIndex} and r <![CDATA[ <= ]]>#{endIndex}
</select>
<!-- //2.3.查询总共记录条数
public int getRecordBooks(); -->
<select id="getRecordBooks" resultType="int">
select count(*)
from (select rownum r from books )
</select>
<parameterMap type="Map" id="allFYMapper">
<parameter property="startIndex" scale="startIndex"/>
<parameter property="endIndex" scale="endIndex"/>
<parameter property=""/>
</parameterMap>
四、service层调用
BooksService.java
//2.2.分页查询
public PageBean<Books> selectByFyBooksService(String eachPageNumber,String eachPageSize);
BooksServiceImpl.java
@Override
public PageBean<Books> selectByFyBooksService(String eachPageNumber,String eachPageSize) {
PageBean<Books> pb = new PageBean<Books>();
//查询总记录数
int totalRecord = bm.getRecordBooks();
//给pageBean对象赋值
pb.setTotalRecord(totalRecord); //totalRecord属性 16
//第一次进来 当前页是 1
String strPageNumber=eachPageNumber;
String strpageSize = eachPageSize;
if(null == strpageSize || "".equals(strpageSize)) {
pb.setPageSize(4);
}else { //不是第一页
int pageSize = Integer.parseInt(strpageSize);
pb.setPageSize(pageSize);
//给pageNumber赋值
if(pageSize<=0 ){
pb.setPageSize(4);
}else if(pageSize>=pb.getTotalRecord()){
pb.setPageNumber(pb.getTotalRecord());
}
}
//第一次访问 给当前页pageNumber 赋值位1
if(null == strPageNumber || "".equals(strPageNumber)) {
pb.setPageNumber(1);
}else { //不是第一页
int pageNumber = Integer.parseInt(strPageNumber);
pb.setPageNumber(pageNumber);
//给pageNumber赋值
if(pageNumber<=0 ){
pb.setPageNumber(1);
}else if(pageNumber>=pb.getTotalPage()){
pb.setPageNumber(pb.getTotalPage());
}
}
//获取分页的集合
ArrayList<Books> list = bm.selectByFyBooks(pb.getStartIndex(), pb.getEndIndex());
pb.setData(list);
return pb;
}
五、controller层调用并在jsp页面显示
BooksController
//2.2.分页查询
@RequestMapping("allFYBooks")
@ResponseBody
public PageBean<Books> selectByFyBooks(String eachPageNumber){
PageBean<Books> pbBooks = bs.selectByFyBooksService(eachPageNumber);
return pbBooks;
};
2747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
