SSM框架+layui+PageHelper实现分页

最新推荐文章于 2022-09-22 10:15:50 发布

webjie

最新推荐文章于 2022-09-22 10:15:50 发布

阅读量592

点赞数

分类专栏： SSM layui PageHelper

本文链接：https://blog.csdn.net/webjie/article/details/106962879

版权

SSM 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

layui

1 篇文章 0 订阅

订阅专栏

PageHelper

1 篇文章 0 订阅

订阅专栏

SSM框架+layui+PageHelper实现分页的步骤，所用到的jar包可以到mvnrepository中下载：

项目结构如下，需自行搭建SSM框架：

在UserInfoMapper.xml中添加SQL语句，查询所有用户信息

<resultMap type="UserInfo" id="userInfoMap">
    <id column="user_id" property="id"/>
    <result column="user_code" property="code"/>
    <result column="user_password" property="password"/>
    <result column="user_name" property="name"/>
    <result column="user_state" property="state"/>
</resultMap>

<select id="findAllUsers" resultMap="userInfoMap">
    select * from sys_user
</select>

在UserInfoMapper.java中添加查询接口；
```
    public List<UserInfo> findAllUsers();
```
导入分页jar包：pagehelper-5.1.11.jar和jsqlparser-3.1.jar；

在mybatis-config.xml配置文件中配置分页插件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-config.dtd">
  
<configuration>
    <!-- 给类型添加别名，默认是类的名称首字母小写，大小写都可以 -->
    <typeAliases >
        <package name="njitt.software.cms.bean"/>
    </typeAliases>
    
    <!-- 配置分页插件 -->
    <plugins >
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!-- 以下内容跟PageHelper版本相关，最好不写，高版本自动识别 
            <property name="helperDialect" value="mysql"/>
            <property name="rowBoundsWithCount" value="true"/>
            -->
        </plugin>
    </plugins>
</configuration>

在UserInfoService接口中添加查询接口

    /**
     * 获取用户分页列表
     * @param pageIndex 当前页码
     * @param pageSize 每页最大数据个数
     * @return 当前页码的用户记录
     */
    public PageInfo<UserInfo> findAllUsers(int pageIndex, int pageSize);

在UserInfoServiceImpl类中添加实现方法

    @Override
    public PageInfo<UserInfo> findAllUsers(int pageIndex, int pageSize) {
        PageHelper.startPage(pageIndex, pageSize);
        List<UserInfo> list = userInfoMapper.findAllUsers();
        PageInfo<UserInfo> pageInfo = new PageInfo<UserInfo>(list);
        return pageInfo;
    }

在util包中的ConstantUtil类中添加，使用的gson-2.8.0.jar解析JSON

package njitt.software.cms.util;

import java.util.List;

import com.google.gson.Gson;

public class ConstantUtil {
    public final static String PREFIX = "{\"code\":0,\"msg\":\"\",\"count\":";
    public final static String DATA = ",\"data\":";
    public final static String SUFFIX = "}";
    
    /**
     * 分页时传入总的记录数和当前页对象的泛型集合
     * @param list 当前页对象的泛型集合
     * @param count 总的记录数
     * @return 当前页数据的json字符串
     */
    public static String getLayerJson(List<?> list, int count) {
        Gson gson = new Gson();
        return PREFIX + count + DATA + gson.toJson(list) + SUFFIX;
    }
    
}

在UserInfoController类中添加方法

    /**
     * 分页方法，请求参数由laypager传递
     * @param page 当前页码(pageIndex)
     * @param limit 每页最大数据个数(pageSize)
     * @return 分页数据，符合layui表格绑定要求的JSON格式字符串
     */ 
    @RequestMapping("/findUsersToJson")
    @ResponseBody
    public String findUsersToJson(int page, int limit) {
        PageInfo<UserInfo> pageInfo = userInfoService.findAllUsers(page, limit);
        Long count = pageInfo.getTotal();
        return ConstantUtil.getLayerJson(pageInfo.getList(), count.intValue());
    }

在表示层user_list.jsp中开启表格的分页功能即可

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" 
                    + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>" />
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="manager/css/layui.css" media="all">
    <link rel="stylesheet" href="manager/layer/theme/default/layer.css" media="all">
    <title>用户管理</title>
</head>
<body>
    <table class="layui-hide" id="test" lay-filter="test"></table>
    
    <script type="text/html" id="switchTpl">
        <input type="checkbox" name="state" value="{{d.state}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="state" {{ d.state == true ? 'checked' : '' }} data-id={{d.id}}>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i> 编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i> 删除</a>
    </script>

    <script src="js/jquery-3.4.1.js" charset="utf-8"></script>
    <script src="manager/js/layui.all.js" charset="utf-8"></script>
    <script src="manager/layer/layer.js" charset="utf-8"></script>

    <script>
        layui.use([ 'table', 'form'], function() {
            var table = layui.table;
            var form = layui.form;
            
            table.render({
                elem : '#test',
                url : 'findUsersToJson',
                toolbar : '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,
                defaultToolbar : [ 'filter', 'exports', 'print', { 
                    title : '提示',
                    layEvent : 'LAYTABLE_TIPS',
                    icon : 'layui-icon-tips'
                } ],
                title : '用户数据表',
                id: 'reload',
                cols : [ [ {
                    type : 'checkbox',
                    fixed : 'left'
                }, {
                    title: '序号',
                    align: "center",
                    width: 80,
                    templet: function (d) {
                        return '<div>' + (d.LAY_TABLE_INDEX + 1) + '</div>'
                    },
                    fixed : 'left'
                },{
                    field : 'id',
                    name : 'ids',
                    title : 'ID',
                    width : 80,
                    fixed : 'left',
                    hide: true
                }, {
                    field : 'code',
                    title : '登录名',
                    width : 120,
                    edit : 'text'
                }, {
                    field : 'name',
                    title : '姓名',
                    width : 150,
                    edit : 'text'
                }, {
                    field : 'state',
                    title : '状态',
                    width : 100,
                    templet : '#switchTpl',
                    unresize : true,
                    sort : true
                }, {
                    fixed : 'right',
                    title : '操作',
                    toolbar : '#barDemo',
                    width : 220
                } ] ],
                page :  {
                    //开启分页page:true即可，以下为自定义分页显示内容
                    layout: ['prev', 'page', 'next', 'count', 'skip']
                }
            }); 
            
            //省略增删改等事件处理过程
        });
    </script>

</body>
</html>

运行界面
单击第2页，查看console中的运行结果，通过PageHelper的拦截器，自动执行了获取用户表记录总数和查询分页记录的两条SQL语句，返回的不是全部数据而是分页后的少量数据。
查看火狐浏览器中单击页面发送的网络请求信息，传递的参数page=2&limit=10。

webjie

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
SSM框架+layui+PageHelper实现分页

SSM框架+layui+PageHelper实现分页的步骤，所用到的jar包可以到mvnrepository中下载：在UserInfoMapper.xml中添加SQL语句，查询所有用户信息 <resultMap type="UserInfo" id="userInfoMap"> <id column="user_id" property="id"/> <result column="user_code" property="code"/>
复制链接

扫一扫

专栏目录