本案例采用了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.