Springboot+Thymeleaf如何实现数据分页查询功能?

Springboot+Thymeleaf是我们比较常用的搭配,那么如何在这个搭配中实现数据分页功能?

第一步:写一个分页查询的工具类,PageUtil.java

package com.lyx.bookmanager.utils;

import java.util.List;

// 分页工具类
public class PageUtil<T> {

    // 对象记录结果集
    private List<T> list;

    // 总记录数
    private int total = 0;
    // 每页显示记录数
    private int limit = 20;
    // 总页数
    private int pages = 1;
    // 当前页
    private int pageNumber = 1;
    // 是否为第一页
    private boolean isFirstPage = false;
    // 是否为最后一页
    private boolean isLastPage = false;
    // 是否有前一页
    private boolean hasPreviousPage = false;
    // 是否有下一页
    private boolean hasNextPage = false;
    // 导航页码数
    private int navigatePages = 8;
    // 所有导航页号
    private int[] navigatePageNumbers;
    // 尾页
    private int lastPage = 0 ;
    // 首页
    private int firstPage = 1 ;
    // 上一页
    private int prePage = 0;
    // 下一页
    private int nextPage = 0;


    public PageUtil(int pageNumber, int limit, List<T> list) {
        init(list, pageNumber, limit);
    }

    private void init(List<T> list, int pageNumber, int limit){
        //设置基本参数
        this.list = list;
        this.total = list.size();
        this.limit = limit;
        this.pages = (this.total-1)/this.limit+1;
        this.lastPage = pages;
        this.firstPage = 1;
        this.prePage = pageNumber-1;
        this.nextPage = pageNumber+1;
        //根据输入可能错误的当前号码进行自动纠正
        if(pageNumber<1){
            this.pageNumber=1;
        }else if(pageNumber>this.pages){
            this.pageNumber=this.pages;
        }else{
            this.pageNumber=pageNumber;
        }

        //基本参数设定之后进行导航页面的计算
        calcNavigatePageNumbers();

        //以及页面边界的判定
        judgePageBoudary();
    }

    /**
     * 计算导航页
     */
    private void calcNavigatePageNumbers(){
        //当总页数小于或等于导航页码数时
        if(pages<=navigatePages){
            navigatePageNumbers=new int[pages];
            for(int i=0;i<pages;i++){
                navigatePageNumbers[i]=i+1;
            }
        }else{ //当总页数大于导航页码数时
            navigatePageNumbers=new int[navigatePages];
            int startNum=pageNumber-navigatePages/2;
            int endNum=pageNumber+navigatePages/2;

            if(startNum<1){
                startNum=1;
                //(最前navPageCount页
                for(int i=0;i<navigatePages;i++){
                    navigatePageNumbers[i]=startNum++;
                }
            }else if(endNum>pages){
                endNum=pages;
                //最后navPageCount页
                for(int i=navigatePages-1;i>=0;i--){
                    navigatePageNumbers[i]=endNum--;
                }
            }else{
                //所有中间页
                for(int i=0;i<navigatePages;i++){
                    navigatePageNumbers[i]=startNum++;
                }
            }
        }
    }

    /**
     * 判定页面边界
     */
    private void judgePageBoudary(){
        isFirstPage = pageNumber == 1;
        isLastPage = pageNumber == pages && pageNumber!=1;
        hasPreviousPage = pageNumber!=1;
        hasNextPage = pageNumber!=pages;
    }

    /**
     * 得到当前页的内容
     * @return {List}
     */
    public List<T> getList() {

        int endIndex = total;
        if(pageNumber*limit <= total){
            endIndex = pageNumber*limit;
        }

        List<T> pagelist = list.subList((pageNumber-1)*limit, endIndex);
        return pagelist;
    }

    public int getLastPage() {
        return lastPage;
    }

    public void setLastPage(int lastPage) {
        this.lastPage = lastPage;
    }

    public int getFirstPage() {
        return firstPage;
    }

    public void setFirstPage(int firstPage) {
        this.firstPage = firstPage;
    }

    public int getPrePage() {
        return prePage;
    }

    public void setPrePage(int prePage) {
        this.prePage = prePage;
    }

    public int getNextPage() {
        return nextPage;
    }

    public void setNextPage(int nextPage) {
        this.nextPage = nextPage;
    }

    /**
     * 得到记录总数
     * @return {int}
     */
    public int getTotal() {
        return total;
    }

    /**
     * 得到每页显示多少条记录
     * @return {int}
     */
    public int getLimit() {
        return limit;
    }

    /**
     * 得到页面总数
     * @return {int}
     */
    public int getPages() {
        return pages;
    }

    /**
     * 得到当前页号
     * @return {int}
     */
    public int getPageNumber() {
        return pageNumber;
    }


    /**
     * 得到所有导航页号
     * @return {int[]}
     */
    public int[] getNavigatePageNumbers() {
        return navigatePageNumbers;
    }

    public boolean isFirstPage() {
        return isFirstPage;
    }

    public boolean isLastPage() {
        return isLastPage;
    }

    public boolean hasPreviousPage() {
        return hasPreviousPage;
    }

    public boolean hasNextPage() {
        return hasNextPage;
    }
}

第二步:在 controller 层 BookController.java 中调用该工具类实现分页查询,代码如下:

    /**
     * 带分页的查找
     * @param map
     * @param model
     * @return
     */
    @GetMapping("/getAll")
    public String pageTest(@RequestParam Map<String, String> map, Model model) {
        if (map.size() == 0 || map.get("currentPage").isEmpty()) {
            map.put("currentPage", "1");
        }
        // 从数据库中查询出信息
        List<Book> books = bookMapper.getAllBook();
        PageUtil pageInfo = new PageUtil(Integer.valueOf(map.get("currentPage")), 5, books);
        model.addAttribute("books", pageInfo.getList());
        model.addAttribute("pageInfo", pageInfo);
        return "admin/books";
    }

 第三步:前端 books.html 代码如下:


<table>
    <thead>
    <tr>
        <th>xxxxxx</th>
        <th>xxxxxx</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="t : ${test}">
        <td th:text="${t.t1}"></td>
        <td th:text="${t.t2}"></td>
    </tr>
    </tbody>

    <div align="center" style="margin-top: 15px;">
        <a class="allpage"><b th:text="'共 '+ ${pageInfo.getPages()}+ ' 页'"></b></a>
        <a th:href="@{/admin/book/getAll(currentPage=${pageInfo.getFirstPage()})}" >首页</a>
        <a th:if="${pageInfo.hasPreviousPage()} == true" th:href="@{/admin/book/getAll(currentPage=${pageInfo.getPrePage()})}"  >上一页</a>
        <a th:href="@{'/admin/book/getAll?currentPage=' + ${i}}"  th:each="i :${#numbers.sequence(pageInfo.firstPage, pageInfo.lastPage)}" th:text="${i}+' '" th:class="${pageInfo.getPageNumber() == i}? 'page-item active' :'page-item' "></a>
        <a th:if="${pageInfo.hasNextPage()} == true" th:href="@{/admin/book/getAll(currentPage=${pageInfo.getNextPage()})}" >下一页</a>
        <a th:href="@{/admin/book/getAll(currentPage=${pageInfo.getLastPage()})}" >尾页</a>
    </div>

至此分页功能即实现完成,效果如下图所示:

如果你也想获取完整代码,下面领取。关注并回复:044springboot

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜未央5788

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值