前端分页查询

网上分页的参考大多很难与自己的项目兼容，所以自己造个分页轮子

技术：thymeleaf(数据处理) + bootstrap(样式处理)，

可以参考代码格式，使用其他的数据处理（如jsp）及样式技术进行替换，即可直接使用

 

效果展示：（页号动态变更）

靠前页：

中间页

靠后页

 

 代码：

 前端接收后端的响应数据为PageBean的一个实例对象，后端Java类如下：

public class PageBean<T>{
  // 当前页
  private Integer currentPage = 1;
  // 每页显示的总条数
  private Integer pageSize = 10;
  // 总条数
  private Integer totalNum;
  // 是否有下一页
  private Integer isMore;
  // 总页数
  private Integer totalPage;
  // 开始索引
  private Integer startIndex;
  // 分页结果
  private List<T> items;

  public PageBeanVO() {
      super();
  }

  public PageBeanVO(Integer currentPage, Integer pageSize, Integer totalNum) {
      super();
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.totalNum = totalNum;
      this.totalPage = (this.totalNum+this.pageSize-1)/this.pageSize;
      this.startIndex = (this.currentPage-1)*this.pageSize;
      this.isMore = this.currentPage >= this.totalPage?0:1;
  }

  public Integer getCurrentPage() {
      return currentPage;
  }

  public void setCurrentPage(Integer currentPage) {
      this.currentPage = currentPage;
  }

  public Integer getPageSize() {
      return pageSize;
  }

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

  public Integer getTotalNum() {
      return totalNum;
  }

  public void setTotalNum(Integer totalNum) {
      this.totalNum = totalNum;
  }

  public Integer getIsMore() {
      return isMore;
  }

  public void setIsMore(Integer isMore) {
      this.isMore = isMore;
  }

  public Integer getTotalPage() {
      return totalPage;
  }

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

  public Integer getStartIndex() {
      return startIndex;
  }

  public void setStartIndex(Integer startIndex) {
      this.startIndex = startIndex;
  }

  public List<T> getItems() {
      return items;
  }

  public void setItems(List<T> items) {
      this.items = items;
  }
}

 

 前端分页代码如下：

 <div style="float:right">
      <span th:text="'总条数：'+${pageBean.totalNum}+' 条 / 总页数：'+${pageBean.totalPage}+' 页'"></span>
        <br/>
      <ul class="pagination" th:with="currentPage=${pageBean.currentPage},totalPage=${pageBean.totalPage},link=${#httpServletRequest.requestURL}" >
        <li><a th:href="@{${link}}">首页</a></li>
        <li><a th:href="@{${link}(currentPage=${currentPage>1?currentPage-1:1})}">&laquo;</a></li>
        <li th:if="${currentPage-2>0}"><a th:href="@{${link}(currentPage=${currentPage-2})}" th:text="${currentPage-2}"></a></li>
        <li th:if="${currentPage-1>0}"><a th:href="@{${link}(currentPage=${currentPage-1})}" th:text="${currentPage-1}"></a></li>
        <li th:class="active"><a th:href="@{${link}(currentPage=${currentPage}}" th:text="${currentPage}"></a></li>
        <li th:if="${currentPage+1<=totalPage}"><a th:href="@{${link}(currentPage=${currentPage}+1)}" th:text="${currentPage}+1"></a></li>
        <li th:if="${currentPage+2<=totalPage}"><a th:href="@{${link}(currentPage=${currentPage}+2)}" th:text="${currentPage}+2"></a></li>
        <li><a th:href="@{${link}(currentPage=${currentPage+1<=totalPage?currentPage+1:totalPage})}">&raquo;</a></li>
        <li><a th:href="@{${link}(currentPage=${totalPage})}">尾页</a></li>    
      </ul>
 </div>