分页工具

package com.zxkj.bean;

import java.util.List;

public class PageBean<T> {
    //当前页显示的数据
    private List<T> records;
    //当前页码
    private long pageNum;
    //总页码
    private long totalPageNum;

    //每页显示的记录条数
    private long pageSize = GlobalConst.PAGE_SIZE;
    //总记录条数
    private long totalRecordsNum;
    //上一页
    private long prePageNum;
    //下一页
    private long nextPageNum;

    //自定义值
    private Object object;
    //查询分页的请求的地址(通过这个属性可以将页面中的分页部分给抽取成公共部分)
    private String url;    

    public List<T> getRecords() {
        return records;
    }

    public void setRecords(List<T> records) {
        this.records = records;
    }

    public long getPageNum() {
        return pageNum;
    }

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

    public long getTotalPageNum() {
        return totalPageNum;
    }

    public void setTotalPageNum(long totalPageNum) {
        this.totalPageNum = totalPageNum;
    }

    public Object getObject() {
        return object;
    }

    public void setObject(Object object) {
        this.object = object;
    }

    public long getPrePageNum() {
        prePageNum = pageNum - 1;
        if (prePageNum < 1) {
            prePageNum = 1;
        }
        return prePageNum;
    }

    public long getNextPageNum() {
        nextPageNum = pageNum + 1;
        if (nextPageNum > totalPageNum) {
            nextPageNum = totalPageNum;
        }
        return nextPageNum;
    }

    public long getPageSize() {
        return pageSize;
    }

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

    public long getTotalRecordsNum() {
        return totalRecordsNum;
    }

    public void setTotalRecordsNum(long totalRecordsNum) {
        this.totalRecordsNum = totalRecordsNum;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    @Override
    public String toString() {
        StringBuffer sb = new StringBuffer();
        for (T t : records) {
            sb.append(t).append("\n");
        }
        return "PageBean{\n" +
                "pageNum=" + pageNum +
                ", totalPageNum=" + totalPageNum +
                ", pageSize=" + pageSize +
                ", totalRecordsNum=" + totalRecordsNum +
                ", prePageNum=" + prePageNum +
                ", nextPageNum=" + nextPageNum +
                ", url='" + url + '\'' + ",\n" +
                ", object='" + object.toString() +
                "records=" + sb +
                '}';
    }
}    

前端分页导航条:html+thymeleaf

<!--分页-->
<div class="btn-group btn-group-page" id="btn-group-page"
     style="position: fixed;bottom: 0px;bottom: 5px;left: 476px;"
     th:if="${pageBean != null && pageBean.records.size() ne 0}">
    <!--        上一页-->
    <a th:class="${pageBean.pageNum==1?'btn btn-default radius':'btn btn-primary radius'}"
       th:href="${pageBean.url}+${pageBean.prePageNum}"><i class="Hui-iconfont">&#xe6d4;</i></a>
    <!--        页码-->
    <a th:class="${pageBean.pageNum==i?'btn btn-secondary radius':'btn btn-default radius'}"
       th:href="${pageBean.url}+${i}"
       th:each="i: ${#numbers.sequence(__${pageBean.object[0]}__,__${pageBean.object[1]}__)}" th:text="${i}"></a>
    <!--        ...-->
    <a class="btn btn-default radius" th:href="${pageBean.url}+${pageBean.nextPageNum}"
       th:if="${pageBean.object[1]!=pageBean.totalPageNum}"><i class="Hui-iconfont">&#xe69c;</i></a>
    <!--        总页码-->
    <a class="btn btn-default radius" th:href="${pageBean.url}+${pageBean.totalPageNum}"
       th:if="${pageBean.object[1]!=pageBean.totalPageNum}" th:text="${pageBean.totalPageNum}"></a>
    <!--        下一页-->
    <a th:class="${pageBean.pageNum<pageBean.totalPageNum?'btn btn-primary radius':'btn btn-default radius'}"
       th:href="${pageBean.url}+${pageBean.nextPageNum}"><i class="Hui-iconfont">&#xe6d7;</i></a>
</div>

<!--以上可抽离出页面,用下面这段引用-->
<div style="float: right" th:include="common/_page.html"></div>

如果需要动态居中可以使用以下js代码(不推荐使用):

    // 分页导航条居中
    function pageCenter() {
        var page = document.getElementById("btn-group-page");
        //获取元素自身的宽度
        var L1 = page.offsetWidth;
        //获取实际页面的left值。(页面宽度减去元素自身宽度/2)
        var Left = (document.documentElement.clientWidth - L1) / 2;
        page.style.left = Left + 'px';
    }

    window.onresize = function () {
        pageCenter();
    }

 

 
上一篇:微信小程序实战:上拉加载和下拉刷新


下一篇:小程序下拉刷新 上拉加载等多