Thymeleaf前后端分页查询

分页查询是一个很常见的功能，对于分页也有很多封装好的轮子供我们使用。

比如使用mybatis做后端分页可以用Pagehelper这个插件，如果使用SpringDataJPA更方便，直接就内置的分页查询。

做前端的分页比如常用的Layui也用js 帮忙封装好的分页功能，并且只需要我们按照要求接收对应的参数就行了。

这次的文章主要是使用SpringBoot+Mybatis 实现前端后端的分页功能，并没有使用插件来实现，前端主要是使用Thymeleaf来渲染分页的页码信息。

下面进入正式的内容部分：

加入分页工具类

这个类主要用于存放分页用的一些参数，可以用来接收和返回给页面。

/**

 * 封装分页相关的信息.

 */

public class Page {

    // 当前页码

    private int current = 1;

    // 显示上限

    private int limit = 10;

    // 数据总数(用于计算总页数)

    private int rows;

    // 查询路径(用于复用分页链接)

    private String path;

    public int getCurrent() {

        return current;

    }

    public void setCurrent(int current) {

        if (current >= 1) {

            this.current = current;

        }

    }

    public int getLimit() {

        return limit;

    }

    public void setLimit(int limit) {

        if (limit >= 1 && limit <= 100) {

            this.limit = limit;

        }

    }

    public int getRows() {

        return rows;

    }

    public void setRows(int rows) {

        if (rows >= 0) {

            this.rows = rows;

        }

    }

    public String getPath() {

        return path;

    }

    public void setPath(String path) {

        this.path = path;

    }

    /**

     * 获取当前页的起始行

     *

     * @return

     */

    public int getOffset() {

        // current * limit - limit

        return (current - 1) * limit;

    }

    /**

     * 获取总页数

     *

     * @return

     */

    public int getTotal() {

        // rows / limit [+1]

        if (rows % limit == 0) {

            return rows / limit;

        } else {

            return rows / limit + 1;

        }

    }

    /**

     * 获取起始页码

     *

     * @return

     */

    public int getFrom() {

        int from = current - 2;

        return from < 1 ? 1 : from;

    }

    /**

     * 获取结束页码

     *

     * @return

     */

    public int getTo() {

        int to = current + 2;

        int total = getTotal();

        return to > total ? total : to;

    }

}

控制层Controller

@RequestMapping(path = "/index", method = RequestMethod.GET)

    public String getIndexPage(Model model, Page page) {

        // 方法调用前,SpringMVC会自动实例化Model和Page,并将Page注入Model.

        // 所以,在thymeleaf中可以直接访问Page对象中的数据.

        page.setRows(discussPostService.findDiscussPostRows(0));

        page.setPath("/index");

        List<DiscussPost> list = discussPostService.findDiscussPosts(0, page.getOffset(), page.getLimit());

        List<Map<String, Object>> discussPosts = new ArrayList<>();

        if (list != null) {

            for (DiscussPost post : list) {

                Map<String, Object> map = new HashMap<>();

                map.put("post", post);

                User user = userService.findUserById(post.getUserId());

                map.put("user", user);

                discussPosts.add(map);

            }

        }

        model.addAttribute("discussPosts", discussPosts);

        return "/index";

    }

数据访问层Dao：

接口Dao.java:

@Mapper

public interface DiscussPostMapper {

    List<DiscussPost> selectDiscussPosts(int userId, int offset, int limit);

    // @Param注解用于给参数取别名,

    // 如果只有一个参数,并且在<if>里使用,则必须加别名.

    int selectDiscussPostRows(@Param("userId") int userId);

}

映射文件Mapper.xml:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE mapper

        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.nowcoder.community.dao.DiscussPostMapper">

    <sql id="selectFields">

        id, user_id, title, content, type, status, create_time, comment_count, score

    </sql>

    <select id="selectDiscussPosts" resultType="DiscussPost">

        select <include refid="selectFields"></include>

        from discuss_post

        where status != 2

        <if test="userId!=0">

            and user_id = #{userId}

        </if>

        order by type desc, create_time desc

        limit #{offset}, #{limit}

    </select>

    <select id="selectDiscussPostRows" resultType="int">

        select count(id)

        from discuss_post

        where status != 2

        <if test="userId!=0">

            and user_id = #{userId}

        </if>

    </select>

</mapper>

前端模板分页逻辑

这里只是列出了分页栏部分的逻辑，具体可以根据自己的分页工具栏的样式来调整。

注：

th:href="@{${page.path}(current=1)}

这里的()内的表示传递的参数，也可以添加多个，如 th:href="@{${page.path}(param1=1,param2=${person.id})}"
th:class="|page-item ${page.current==1?'disabled':''}|"

这里的|表示原有的属性，当我们要用到在原有的class添加其他class时候可以用到

<!-- 分页 -->

            <nav class="mt-5" th:if="${page.rows>0}">

                <ul class="pagination justify-content-center">

                    <li class="page-item">

                        <a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>

                    </li>

                    <li th:class="|page-item ${page.current==1?'disabled':''}|">

                        <a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a></li>

                    <li th:class="|page-item ${i==page.current?'active':''}|"

                        th:each="i:${#numbers.sequence(page.from,page.to)}">

                        <a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}">1</a>

                    </li>

                    <li th:class="|page-item ${page.current==page.total?'disabled':''}|">

                        <a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一页</a>

                    </li>

                    <li class="page-item">

                        <a class="page-link" th:href="@{${page.path}(current=${page.total})}">末页</a>

                    </li>

                </ul>

            </nav>

附：thymeleaf遍历，日期格式化

渲染页面的时候会经常用到。

<!-- 帖子列表 -->

            <ul class="list-unstyled">

                <li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}">

                    <a href="site/profile.html">

                        <img th:src="${map.user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像"

                             style="width:50px;height:50px;">

                    </a>

                    <div class="media-body">

                        <h6 class="mt-0 mb-3">

                            <a href="#" th:utext="${map.post.title}">备战春招，面试刷题跟他复习，一个月全搞定！</a>

                            <span class="badge badge-secondary bg-primary" th:if="${map.post.type==1}">置顶</span>

                            <span class="badge badge-secondary bg-danger" th:if="${map.post.status==1}">精华</span>

                        </h6>

                        <div class="text-muted font-size-12">

                            <u class="mr-3" th:utext="${map.user.username}">寒江雪</u> 发布于 <b

                                th:text="${#dates.format(map.post.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15

                            15:32:18</b>

                            <ul class="d-inline float-right">

                                <li class="d-inline ml-2">赞 11</li>

                                <li class="d-inline ml-2">|</li>

                                <li class="d-inline ml-2">回帖 7</li>

                            </ul>

                        </div>

                    </div>

                </li>

            </ul>

巴特西