W3Schools Learner's Blog

W3Schools Programming knowledge summary website

div

7/06/2019

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插件配置,代码如下。
 <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>
完毕!

No comments:

Post a Comment

Note: only a member of this blog may post a comment.