SSM+thymeleaf+pagehelper实现简单的分页功能

疯狂的后端攻城狮

已于 2022-09-02 09:39:55 修改

阅读量1.1k

点赞数 3

分类专栏： Java Spring 文章标签： mybatis java 开发语言 spring

于 2022-09-01 16:54:59 首次发布

本文链接：https://blog.csdn.net/weixin_45790267/article/details/126644528

版权

Java 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Spring

2 篇文章 0 订阅

订阅专栏

一、前期准备

1、在pom.xml中导入分页插件依赖

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.2.0</version>
        </dependency>

2、在mybatis.xml中配置插件

    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
    </plugins>

3、数据库表格数据（建议十条以上，这里我随意加了30条数据）

4、html页面头部添加thymeleaf约束

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>

二、具体实现

1、dao层

    <select id="getAllEmployee" resultType="Employee">
        select * from t_emp
    </select>

public interface EmployeeMapper {
    /**
     * 查询所有员工信息
     * @return
     */
    List<Employee> getAllEmployee();
}

2、service层

一定要在查询数据之前开启分页功能，最后得到page里面有很多封装好的数据，可以自己打印一下查看里面的数据。

在这里插入图片描述

分页相关数据：

pageNum：当前页的页码
pageSize：每页显示的条数
size：当前页显示的真实条数
total：总记录数
pages：总页数
prePage：上一页的页码
nextPage：下一页的页码
isFirstPage/isLastPage：是否为第一页/最后一页
hasPreviousPage/hasNextPage：是否存在上一页/下一页
navigatePages：导航分页的页码数
navigatepageNums：导航分页的页码，[1,2,3,4,5]

@Service
@Transactional
public class EmployeeServiceImpl implements EmployeeService {
    @Autowired
    private EmployeeMapper employeeMapper;
    public PageInfo<Employee> getEmployeePage(Integer pageNum) {
        //开启分页功能
        PageHelper.startPage(pageNum,4);
        //查询所有员工信息
        List<Employee> list = employeeMapper.getAllEmployee();
        //获取分页相关数据
        PageInfo<Employee> page = new PageInfo<>(list,5);
        return page;
    }
}

public interface EmployeeService {
    /**
     * 获取员工的分页信息
     * @param pageNum
     * @return
     */
    PageInfo<Employee> getEmployeePage(Integer pageNum);
}

2、controller层

这里用到了restful的请求方式，不指定请求方式也是可以的，用你自己熟悉的方式写也可以

@Controller
public class EmployeeController {
    @Autowired
    private EmployeeService employeeService;

    @RequestMapping(value = "/employee/page/{pageNum}",method = RequestMethod.GET)
    public String getEmployeePage(Model model,@PathVariable("pageNum") Integer pageNum){
        //获取员工的分页信息
        PageInfo<Employee> page = employeeService.getEmployeePage(pageNum);
        //将分页数据共享到请求域中
        model.addAttribute("page",page);
        //跳转到employee_list.html
        return "employee_list";
    }
}

3、html前端页面

IDEA使用thymeleaf语法有些会报红，但是不影响使用

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<h1>index.html</h1>
<a th:href="@{/employee}">查询所有员工信息</a>
<a th:href="@{/employee/page/1}">查询员工的分页信息</a>
</body>
</html>

利用上面提供的分页数据实现首页、上一页、下一页、末页，在第一页的时候首页不显示，在最后一页时末页不显示，标红当前所在页面的页码

employee_list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<table>
    <tr>
        <th>员工列表</th>
    </tr>
    <tr>
        <th>流水号</th>
        <th>员工姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>邮箱</th>
        <th>操作</th>
    </tr>
    <tr th:each="employee,status : ${page.list}">
        <td th:text="${status.count}"></td>
        <td th:text="${employee.empName}"></td>
        <td th:text="${employee.age}"></td>
        <td th:text="${employee.gender}"></td>
        <td th:text="${employee.email}"></td>
        <td>
            <a href="">删除</a>
            <a href="">修改</a>
        </td>
    </tr>
</table>
<div style="text-align: center">
    <a th:if="${page.hasPreviousPage}" th:href="@{/employee/page/1}">首页</a>
    <a th:if="${page.hasPreviousPage}" th:href="@{'/employee/page/'+${page.prePage}}">上一页</a>
    <span th:each="num : ${page.navigatepageNums}">
            <a th:if="${page.pageNum == num}" style="color: red" th:href="@{'/employee/page/'+${num}}" th:text="'['+${num}+']'"></a>
            <a th:if="${page.pageNum != num}" th:href="@{'/employee/page/'+${num}}" th:text="${num}"></a>
    </span>
    <a th:if="${page.hasNextPage}" th:href="@{'/employee/page/'+${page.nextPage}}">下一页</a>
    <a th:if="${page.hasNextPage}" th:href="@{'/employee/page/'+${page.pages}}">末页</a>
</div>
</body>
</html>

三、实现效果

首页

第一页时，首页不展示
中间页
不在首页或末页时，正常显示
末页
在最后一页时，不显示末页

疯狂的后端攻城狮

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
SSM+thymeleaf+pagehelper实现简单的分页功能

pageNum：当前页的页码pageSize：每页显示的条数size：当前页显示的真实条数total：总记录数pages：总页数prePage：上一页的页码nextPage：下一页的页码isFirstPage/isLastPage：是否为第一页/最后一页hasPreviousPage/hasNextPage：是否存在上一页/下一页navigatePages：导航分页的页码数navigatepageNums：导航分页的页码，[1,2,3,4,5]...
复制链接

扫一扫