ssm+pageHelper+layui分页插件使用案例(源码下载)

本案例采用了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插件配置，代码如下。

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 MapfindAllByPage(int page,int pageSize){ 
  Map resultMap = new HashMap();
  PageInfo 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 findUserByPage(int page, int pageSize) {
  PageHelper.startPage(page, pageSize);
  List list = userMapper.selectAll();
  return new PageInfo(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"%>













 
   
     
       ID
    用户名
    密码
    电话
    地址
    分数
    操作
     
   
   
   
 
 
 

$(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 += "";   content += ""+o.id+"";   content += ""+o.username+"";   content += ""+o.password+"";   content += ""+o.phone+"";   content += ""+o.address+"";   content += ""+o.score+"";   content += "删除";   content += "";  });  $('#tbody').html(content); }

完毕！