Thymeleaf+bootstrap实现分页效果

1. 效果

   
   image.png

image.png image.png

当前页面是第一页或最后一页时，上一页、下一页 链接失效

image.png

2. 模板代码基于Bootstrap

<ul class="pagination pagination-lg" >
                                <li th:class="${goodsPage.pageNum==1}?'disabled' : ''"><a th:href="${goodsPage.pageNum==1} ? 'javascript:void(0);' : @{${urlString} + 'page-' + ${goodsPage.pageNum-1} + '.html'}">上一页</a></li>
                                <li th:if="${goodsPage.pageNum-3 >=1}" ><a th:href="@{${urlString} + 'page-' + ${goodsPage.pageNum-3} + '.html'}" th:text="${goodsPage.pageNum -3}" >1</a></li>
                                <li th:if="${goodsPage.pageNum-2 >=1}" ><a th:href="@{${urlString} + 'page-' + ${goodsPage.pageNum-2} + '.html'}" th:text="${goodsPage.pageNum -2}" >1</a></li>
                                <li th:if="${goodsPage.pageNum-1 >=1}" ><a th:href="@{${urlString} + 'page-' + ${goodsPage.pageNum-1} + '.html'}" th:text="${goodsPage.pageNum -1}" >1</a></li>
                                <li class="active"><a href="#" th:text="${goodsPage.pageNum}" >1</a></li>
                                <li th:if="${goodsPage.pageNum+1 <=goodsPage.totalPage}" ><a th:href="@{${urlString} + 'page-' + ${goodsPage.pageNum+1} + '.html'}" th:text="${goodsPage.pageNum +1}" >1</a></li>
                                <li th:if="${goodsPage.pageNum+2 <=goodsPage.totalPage}" ><a th:href="@{${urlString} + 'page-' + ${goodsPage.pageNum+2} + '.html'}" th:text="${goodsPage.pageNum +2}" >1</a></li>
                                <li th:if="${goodsPage.pageNum+3 <=goodsPage.totalPage}" ><a th:href="@{${urlString} + 'page-' + ${goodsPage.pageNum+3} + '.html'}" th:text="${goodsPage.pageNum +3}" >1</a></li>

                                <li th:class="${goodsPage.pageNum==goodsPage.totalPage}?'disabled' : ''" ><a th:href="${goodsPage.pageNum==goodsPage.totalPage} ? 'javascript:void(0);' : @{${urlString} + 'page-' + ${goodsPage.pageNum+1} + '.html'}">下一页</a></li>
                                <li th:class="disabled"><a href="javascript:void(0);" th:text="@{'共' + ${goodsPage.totalPage}+ '页'}">共5页</a></li>
                            </ul>

3. 分页数据封装类

public class CommonPage<T> {
    private Integer pageNum;
    private Integer pageSize;
    private Integer totalPage;
    private Long total;
    private List<T> list;

    /**
     * 将PageHelper分页后的list转为分页信息
     */
    public static <T> CommonPage<T> restPage(List<T> list) {
        CommonPage<T> result = new CommonPage<T>();
        PageInfo<T> pageInfo = new PageInfo<T>(list);
        result.setTotalPage(pageInfo.getPages());
        result.setPageNum(pageInfo.getPageNum());
        result.setPageSize(pageInfo.getPageSize());
        result.setTotal(pageInfo.getTotal());
        result.setList(pageInfo.getList());
        return result;
    }

    /**
     * 将SpringData分页后的list转为分页信息
     */
    public static <T> CommonPage<T> restPage(Page<T> pageInfo) {
        CommonPage<T> result = new CommonPage<T>();
        result.setTotalPage(pageInfo.getTotalPages());
        result.setPageNum(pageInfo.getNumber());
        result.setPageSize(pageInfo.getSize());
        result.setTotal(pageInfo.getTotalElements());
        result.setList(pageInfo.getContent());
        return result;
    }

    public Integer getPageNum() {
        return pageNum;
    }

    public void setPageNum(Integer pageNum) {
        this.pageNum = pageNum;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public Integer getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }

    public Long getTotal() {
        return total;
    }

    public void setTotal(Long total) {
        this.total = total;
    }
}

4. 参考
   https://blog.csdn.net/lynn_coder/article/details/79919638