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

最新推荐文章于 2022-12-28 14:08:42 发布

f45056231p

最新推荐文章于 2022-12-28 14:08:42 发布

阅读量2.7k

点赞数 1

分类专栏： layui ssm

ssm 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

layui

1 篇文章 0 订阅

订阅专栏

本案例采用了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的形式运行。

QQ截图20170830210348.png

如何使用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>

完毕！