随笔 - 91,  文章 - 1,  评论 - 16,  阅读 - 27万

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

技术: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>
复制代码

 

posted on   i野老i  阅读(1154)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何调试 malloc 的底层源码
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
阅读排行:
· 25岁的心里话
· 因为Apifox不支持离线,我果断选择了Apipost!
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· Trae 开发工具与使用技巧
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示