Javascript 前端分页——根据页面大小(pageSize)和总行数(total)计算总页面数(totalPage)

分页时,根据页面大小(pageSize)和总行数(total),计算总页面数(totalPage)

一:总行数取余页面大小,等于0,则页数为整页数,否则有余数,则页数为正页数加一

 
 // 总行数取余页面大小,等于0,则页数为整页数,否则有余数,则页数为正页数加一
 const totalPage = (total % pageSize == 0) ? (total / pageSize) : (total / pageSize + 1)

二:总页数=(总数-1)/每页数量+1

// 总页数 =(总数 - 1)/ 每页数量 + 1
const totalPage = (total - 1) / pageSize + 1

三:总页数=(总数 + 每页数量 - 1)/ 每页数量 

//  总页数=(总数+每页数量-1)/每页数量
const totalPage = (total + pageSize - 1) / pageSize

简述一下第三个是如何证明的:

1. 特殊情况total = 0时,为0页
2. total大于等于一页时:
        2.1 整除的情况下:total / pageSize 满足
        2.2 有余数的情况下,就多加一页: total / pageSize + 1 等价于 (total + pageSize) / pageSize
3. total小于页面大小时,为1页
        3.1 当total = 1时,total需要再加上整数x,才够一页,即(total + x) / pageSize,x ∈ [pageSize - 1, 2(pageSize - 1)]
        3.2 当total = pageSize - 1时,total需要再加上整数x,才够一页,即(total + x) / pageSize,x ∈ [1, pageSize]
为了满足情况3.1、3.2,二者取交集,所以total需要加上整数 x ∈ [pageSize - 1, pageSize]
如果x取pageSize,会影响情况2.1造成页数多一页,不会影响情况2.2,故舍去
又因为pageSize - 1为 total 除以 pageSize 的最大余数,对total大于等于一页的两种情况均不影响,所以x应取pageSize - 1


所以综上所述:总页数totalPage = (total + pageSize - 1) / pageSize,代入total=0时,为0页,满足,证明完毕!

total / pageSize + 1等价于(total + pageSize) / pageSize: 取整(/ 二元操作符)是一个整体和另一个整体进行运算,不可化简,此处等价于有前提条件。
(total + pageSize - 1) / pageSize 不可化简成 (total - 1) / pageSize + 1,因为此处是取整,不是除法。

四:使用Math.ceil()函数,进1法取整。Math.ceil(total / pageSize)

// 使用Math.ceil()函数,进1法取整
const totalPage = Math.ceil(total / pageSize)
Math.Ceiling(0.0) //0
Math.Ceiling(0.1) //1
Math.Ceiling(0.5) //1
Math.Ceiling(0.6) //1
Math.Ceiling(0.7) //1
Math.Ceiling(1.01) //2

引用:

【数据结构与算法】分页时,根据页面大小和总行数,计算总页面数(含推理过程)_分页查询计算总页数_debug4flaw的博客-CSDN博客

分页计算总页数算法:总页数=(总数-1)/每页数量+1----总页数=(总数+每页数量-1)/每页数量_总页数怎么算-CSDN博客

  • 13
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端页面上,你可以使用以下元素来实现分页查询: 1. 页码:可以使用一个字列表来示页码,用户点击不同的字可以跳转到对应的页面。 2. :可以在页面顶部或底部显示,让用户了解当前查询结果的。 3. 每页显示:可以使用一个下拉列表或单选框来让用户选择每页显示的条。 4. 分页查询:可以在页面下方显示分页器,让用户可以翻页查看不同的结果页。 在实现分页查询的过程中,需要注意以下几点: 1. 查询结果需要进行分页处理,只返回当前页的据。 2. 当用户进行翻页操作时,需要重新向后端发送请求获取对应页的据。 3. 当用户改变每页显示时,需要重新请求获取对应页的据,并重新渲染分页器。 4. 分页器需要根据当前页和页数进行动态渲染,让用户可以清晰地了解当前所在的页面位置。 比如,可以使用HTML、CSS、JavaScript等技术实现一个分页查询的前端页面,代码示例如下: ```html <!-- 分页查询的HTML代码 --> <div id="page-wrapper"> <!-- 显示 --> <div id="total-count">共有<span id="count"></span>条记录</div> <!-- 每页显示 --> <div id="page-size"> <label>每页显示:</label> <select id="pageSize"> <option value="10">10</option> <option value="20">20</option> <option value="50">50</option> </select> </div> <!-- 分页器 --> <div id="pagination"> <ul id="page-list"></ul> </div> </div> <!-- JavaScript代码 --> <script> var totalCount = 100; // var pageSize = 10; // 每页显示 var pageCount = Math.ceil(totalCount / pageSize); // 页数 var currentPage = 1; // 当前页码 // 显示 document.getElementById("count").innerText = totalCount; // 显示页码列表 var pageList = ""; for (var i = 1; i <= pageCount; i++) { pageList += "<li><a href='#' onclick='goToPage(" + i + ")'>" + i + "</a></li>"; } document.getElementById("page-list").innerHTML = pageList; // 跳转到指定页码 function goToPage(page) { currentPage = page; // TODO: 发送请求获取对应页码的据 } // 改变每页显示 document.getElementById("pageSize").onchange = function() { pageSize = this.value; pageCount = Math.ceil(totalCount / pageSize); // TODO: 发送请求获取对应页码的据,并重新渲染分页器 }; </script> ``` 在上面的代码中,我们使用了一个`div`元素作为分页查询的容器,其中包含了显示、每页显示分页器等元素。在JavaScript代码中,我们定义了一些变量来存储、每页显示页数和当前页码等信息,并使用循环语句生成了页码列表。在用户点击不同的页码或改变每页显示时,可以通过调用对应的JavaScript来实现跳转到指定页码和重新渲染分页器等功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值