前端分頁查詢

網上分頁的參考大多很難與本身的項目兼容，因此本身造個分頁輪子

技術：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>