利用Thymeleaf实现页面分页

为了方便随取随用

具体实现:首页、末页、上一页(变灰)、下一页(变灰)、当前页高亮、页数可视范围、点击页数跳转等等。。

page.java

/**
 * 封装分页相关的信息
 */
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;
    }

    /**
     * 获取当前页的起始行
     */
    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;
    }

    /**
     * 获取终止页码
     */
    public int getTo(){
        int to=current+2;
        int total=getTotal();
        return to>total?total:to;
    }

}

index.html

<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 ${page.current==i?'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>

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Thymeleaf是一种Java模板引擎,它可以用于构建Web应用程序的用户界面。要实现条件分页,可以使用Thymeleaf的条件语句和分页插件。 以下是一个简单的示例,它演示了如何使用Thymeleaf分页插件实现条件分页: ``` <!-- 在 HTML 中添加分页插件 --> <div th:replace="fragments/pagination :: pagination(${page})"></div> <!-- 在控制器中设置分页参数 --> @GetMapping("/users") public String getUsers(@RequestParam(defaultValue = "0") int page, @RequestParam(defaultValue = "10") int size, @RequestParam(defaultValue = "") String keyword, Model model) { // 获取用户列表 List<User> userList = userService.getUsers(page, size, keyword); // 设置分页对象 Page<User> userPage = new PageImpl<>(userList, PageRequest.of(page, size), userList.size()); // 将分页对象传递给模板 model.addAttribute("page", userPage); return "userList"; } <!-- 在模板中使用条件语句和分页对象 --> <table> <thead> <tr> <th>ID</th> <th>姓名</th> <th>邮箱</th> </tr> </thead> <tbody> <tr th:each="user : ${page.content}" th:if="${user.name.contains(keyword) or keyword == ''}"> <td th:text="${user.id}"></td> <td th:text="${user.name}"></td> <td th:text="${user.email}"></td> </tr> </tbody> </table> ``` 在上面的示例中,我们使用Thymeleaf的`th:each`循环遍历分页对象的内容,并使用`th:if`条件语句过滤出符合条件的数据。分页插件在模板中使用`th:replace`标签引入,它将渲染一个分页组件,该组件接受一个分页对象作为输入参数。 总之,Thymeleaf是一个非常强大的模板引擎,它可以轻松地实现条件分页。我们只需要使用Thymeleaf的条件语句和分页插件,就可以在Web应用程序中实现高效的分页功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值