Spring，SpringMVC，Jquery实现分页功能

一. 需求

在项目当中，我们经常会碰到数据分页的需求。今天，我们就通过Spring，SpringMVC，Jquery实现数据的分页。这是一个买书小案例，实现书籍数据的分页显示。

具体效果：

二. 思路

1. 首先，分页的操作是在数据访问层实现，前端负责传递参数，即当前显示第几页，每页显示的数据笔数。
2. 我们通过4个按钮来改变当前第几页。
3. 我们要查询所有的数据笔数，用于计算总页数。
4. 当前为第一页时，首页和上一页的按钮失效，当前为最后一页时，尾页和下一页的按钮失效。

三. 具体实现

1. 首先，数据访问层：

public interface BookInfoDao {

	/**
	 * 查询所有数据笔数
	 * @return
	 */
	public Integer selectBookCount();
	
	/**
	 * 分页查询数据
	 * @param pageCurrent
	 * @param pageSize
	 * @return
	 */
	public List<BookInfo> selectBookInfoByCurrentPageAndPageSize(Integer pageCurrent,Integer pageSize);
	
}

实现接口，对数据库的操作我们是使用Spring JdbcTemplate

@Repository
public class BookInfoDaoImp implements BookInfoDao {
@Autowired
private JdbcTemplate jdbcTemplate;

/**
 * 查询数据笔数
 */
@Override
public Integer selectBookCount() {
	String sql = "select count(*) from book_info";
	Integer bookCount = this.jdbcTemplate.queryForObject(sql, Integer.class);
	return bookCount;
}

@Override
public List<BookInfo> selectBookInfoByCurrentPageAndPageSize(Integer pageCurrent, Integer pageSize) {
	String sql = "select book_id,book_name,book_stock,book_price from book_info limit ?,?";
	RowMapper<BookInfo> rowMapper = new BeanPropertyRowMapper<>(BookInfo.class);
	List<BookInfo> books = this.jdbcTemplate.query(sql, rowMapper, (pageCurrent-1)*pageSize,pageSize);
	return books;
}
}

2. 业务层

public interface BuyBookService {
/**
 * 查询所有数据笔数
 * @return
 */
public Integer selectBookCount();

/**
 * 分页查询数据
 * @param pageCurrent
 * @param pageSize
 * @return
 */
public List<BookInfo> selectBookInfoByCurrentPageAndPageSize(Integer pageCurrent,Integer pageSize);
}

@Service
public class BuyBooksServiceImp implements BuyBookService {
@Autowired
private BookInfoDao bookInfoDao;

@Override
public Integer selectBookCount() {
	return this.bookInfoDao.selectBookCount();
}

@Override
public List<BookInfo> selectBookInfoByCurrentPageAndPageSize(Integer pageCurrent, Integer pageSize) {
	return this.bookInfoDao.selectBookInfoByCurrentPageAndPageSize(pageCurrent, pageSize);
}
}

3. 控制层

@Controller
@RequestMapping("buyBook")
public class BuyBookController {
@Autowired
private BuyBookService buyBookService;

@ResponseBody
@RequestMapping("showBooks")
public Map<String, Object> showBooks(Integer pageCurrent,Integer pageSize){
	Map<String, Object> map = new HashMap<String, Object>();
	List<BookInfo> books = this.buyBookService.selectBookInfoByCurrentPageAndPageSize(pageCurrent, pageSize);
	Integer total = this.buyBookService.selectBookCount();
	map.put("code", 1001);
	map.put("message", "操纵成功");
	map.put("books", books);
	map.put("total", total);
	return map;
}
}

下面，我们来编写前端代码：

首先，我们要在页面中引入jquery的js文件，下面我们就可以来写前端的代码了

$(function(){
		var pageCurrent = 1;
		var pageSize = 5;
		var total = 0;
		var totalPage = 0;
    	showBookInfos(); //页面加载时就调用
    	
    function showBookInfos(){
			var url = "${pageContext.request.contextPath}/buyBook/showBooks";
			var param = {
					pageCurrent:pageCurrent,
					pageSize:pageSize
			};
			$.get(url,param,function(data){
				if(data.code = 1001){
					total = data.total;
					var bookInfos = data.books;
					var content = "<table><caption>图书信息列表</caption><tr><td>图书名</td><td>库存</td><td>单价</td><td>购买</td><td>加入购物车</td></tr>";
					for(var i = 0;i < bookInfos.length;i++){
						//console.log(bookInfos[i].bookName);
						content += "<tr><td>"+bookInfos[i].bookName+"</td><td>"+bookInfos[i].bookStock+"</td><td>"+bookInfos[i].bookPrice+"</td><td><a class='buyBook' href='"+bookInfos[i].bookId+"'>购买</a></td><td><a class='addCart' href='"+bookInfos[i].bookId+"'>加入购物车</a></td></tr>";
					}
					
					content += "</table>";
					$("#bookInfos").html(content);
					//按钮控制
					buttonController();
					//查询购物车
					showCartInfo();
				}
			});
		}
    
    //控制按钮的状态
		function buttonController(){
			//计算页数
			if(total % pageSize == 0){
				totalPage = total / pageSize;
			}else{
				totalPage = parseInt(total / pageSize) + 1;
			}
			//显示分页信息
			$("#fenyeInfo").html(total+"笔数据，共"+totalPage+"页，当前显示第"+pageCurrent+"页");
			$("#firstPage").prop("disabled",false);
			$("#upPage").prop("disabled",false);
			$("#nextPage").prop("disabled",false);
			$("#lastPage").prop("disabled",false);
			if(pageCurrent == 1 && totalPage !=1){
				$("#firstPage").prop("disabled",true);
				$("#upPage").prop("disabled",true);
			}else if(pageCurrent == 1 && totalPage == 1){
				$("#firstPage").prop("disabled",true);
				$("#upPage").prop("disabled",true);
				$("#nextPage").prop("disabled",true);
				$("#lastPage").prop("disabled",true);
			}else if(pageCurrent == totalPage){
				$("#nextPage").prop("disabled",true);
				$("#lastPage").prop("disabled",true);
			}
		}
		
		//给分页按钮绑定单击事件
		$("#firstPage").click(function(){
			pageCurrent = 1;
			showBookInfos();
		});
		$("#upPage").click(function(){
			pageCurrent = pageCurrent - 1;
			showBookInfos();
		});
		$("#nextPage").click(function(){
			pageCurrent = pageCurrent + 1;
			showBookInfos();
		});
		$("#lastPage").click(function(){
			pageCurrent = totalPage;
			showBookInfos();
		});
		

下面是html

<div id="bookInfos">
</div>
<hr>
<input id="firstPage" type="button" value="首页">
<input id="upPage" type="button" value="上一页">
<input id="nextPage" type="button" value="下一页">
<input id="lastPage" type="button" value="尾页">
<span id="fenyeInfo"></span>

小结

这样写下来，看起来是有点小复杂，建议大家可以去学习一些前端框架，如vue.js等，分页操作就会简单很多了。