SSM中ajax实现分页
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 = $("");
var $a11 = $("");
var $font10 = $(""+obj.bName+"");
var $div11 = $("");
var $span10 = $("
");
var $div21 = $("");
var $div211 = $("");
var $div31 = $("");
var $img30 = $("![](images/"</span><span class="token operator">+</span>obj<span class="token punctuation">.</span>bCover<span class="token operator">+</span><span class="token string">" "作者：\"</span><span class=\"token operator\">+</span>obj<span class=\"token punctuation\">.</span>bAuthor<span class=\"token operator\">+</span><span class=\"token string\">\"")
");
var $div32 = $("");
var $div41 = $("");
var $img40 = $("![](images/"</span><span class="token operator">+</span>obj<span class="token punctuation">.</span>bBack<span class="token operator">+</span><span class="token string">" "作者：\"</span><span class=\"token operator\">+</span>obj<span class=\"token punctuation\">.</span>bAuthor<span class=\"token operator\">+</span><span class=\"token string\">\"")
");
var $div42 = $("");
var $div212 = $("");
var $div22 = $("");
var $div12 = $("");
var $font50 = $("￥"+obj.bPrice+"");
var $a12 = $("");
var $div02 = $("");
$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 = $("");
var $div71 = $(" ");
$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(用于显示条数，页数等)
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>
四、server层调用
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;
};