本案例采用了ssm框架（spring+mybatis+springmvc）搭建，后端使用了pageHelper分页插件，前端采用layui官网的laypage分页插件，分页样式可随便定义，非常丰富，请登录layer官网查看：http://www.layui.com/demo/laypage.html，先看看分页效果，如图。
layui分页项目源码下载地址：http://pan.baidu.com/s/1dE7gVyp 密码：fjx1，resources目录下user.sql文件里有mysql测试数据，可自行导入mysql数据库，将jdbc.properties中的数据库改成你自己的配置，使用maven的形式运行。
如何使用pageHelper+layui来进行分页呢？注：ssm框架的搭建，这里不带大家搭建ssm框架了，因为上面有本项目源码下载，下面是大致的实现流程，不懂请下载项目源码查看。
1：直接来使用pagehelper插件，在mybatis-config.xml中加入pagehelper插件配置，代码如下。
<plugins> <!-- 分页助手 --> <plugin interceptor="com.github.pagehelper.PageHelper"> <property name="dialect" value="mysql" /> <!-- 设置为true时，使用RowBounds分页会进行count查询 --> <property name="rowBoundsWithCount" value="true" /> </plugin> </plugins>
2：在springmvc controller层写一个分页查询接口，代码如下。
package com.maizhe.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.github.pagehelper.PageInfo;
import com.maizhe.entity.User;
import com.maizhe.service.UserService;
@Controller
public class UserController {
@Autowired
private UserService userService;
/**
* pagesize：每页条数
* page:当前页
**/
@RequestMapping(value="/user/list",method=RequestMethod.GET)
@ResponseBody
public Map<String, Object>findAllByPage(int page,int pageSize){
Map<String, Object> resultMap = new HashMap<String, Object>();
PageInfo<User> pager = userService.findUserByPage(page,pageSize);
//总条数
resultMap.put("total", pager.getTotal());
//获取每页数据
resultMap.put("rows", pager.getList());
return resultMap;
}
}3：在service层实现findUserByPage方法，代码如下：
package com.maizhe.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.maizhe.dao.UserMapper;
import com.maizhe.entity.User;
import com.maizhe.service.UserService;
@Service
public class UserServiceImpl implements UserService{
@Autowired
private UserMapper userMapper;
public PageInfo<User> findUserByPage(int page, int pageSize) {
PageHelper.startPage(page, pageSize);
List<User> list = userMapper.selectAll();
return new PageInfo<User>(list);
}
}项目使用maven运行之后，就可以使用http://localhost/laypage/user/list?page=1&pageSize=5来访问我们写好的接口了，现在开始使用layui实现前端的分页功能。
4：去layui官网下载layui前端框架，将里面的js，css导入到项目中，前端实现layui分页的代码如下。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="./lib/jquery/1.9.1/jquery.min.js"></script>
<!-- 以下是分页方法一所需要引入的js -->
<!--<link type="text/css" href="./lib/laypage/1.2/skin/laypage.css">
<script type="text/javascript" src="./lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="./js/core.js"></script> -->
<!-- 以下是分页方法二所需要引入的js -->
<link type="text/css" href="./lib/layui-v2.0.2/css/layui.css" rel="stylesheet">
<script type="text/javascript" src="./lib/layui-v2.0.2/layui.all.js"></script>
</head>
<body>
<table class="layui-table" style="width: 800px">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>电话</th>
<th>地址</th>
<th>分数</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<!-- 分页标签 -->
<div id="page1"></div>
</body>
<script type="text/javascript">
$(function(){
//方法一直接使用独立的laypage插件，具体分页实现请看core.js里面，缺点：样式比较单一
//core.getUserListByPage();
});
//方法二则直接使用layui-v2.0.2里面的分页功能，没有用到core.js里面的方法
layui.use('laypage', function(){
var laypage = layui.laypage;
var url = "http://localhost/laypage/user/list";
var config = {page:1,pageSize:4};
$.getJSON(url,config,function(res){
laypage.render({
elem: 'page1',
count: res.total, //总条数
limit:config.pageSize, //每页条数
theme: '#FFB800', //自定义颜色
jump: function(obj, first){
if(!first){ //首次则不进入
config.page = obj.curr;
getUserListByPage(url,config);
}
}
});
parseUserList(res,config.page);
});
});
//点击页数从后台获取数据
function getUserListByPage(url,config){
$.getJSON(url,config,function(res){
parseUserList(res,config.page);
});
}
//解析数据，currPage参数为预留参数，当删除一行刷新列表时，可以记住当前页而不至于显示到首页去
function parseUserList(res,currPage){
var content = "";
$.each(res.rows, function (i, o) {
content += "<tr>";
content += "<td>"+o.id+"</td>";
content += "<td>"+o.username+"</td>";
content += "<td>"+o.password+"</td>";
content += "<td>"+o.phone+"</td>";
content += "<td>"+o.address+"</td>";
content += "<td>"+o.score+"</td>";
content += "<td><a>删除</a></td>";
content += "</tr>";
});
$('#tbody').html(content);
}
</script>
</html>完毕！