JS分页页码算法是指在前端页面中实现分页功能时,计算出需要显示的页码数字列表的算法。一般来说,需要先确定总页数和需要显示的页码数量,然后根据当前页码和总页数计算出需要显示的页码数字列表。常用的算法包括:固定显示页码数量、动态计算页码数量、固定显示首位页码和省略中间页码等。
实现分页功能时,需要考虑用户体验和页面效果,选择合适的算法加以应用。
在进行 JavaScript 分页页码算法设计前,需要先了解以下几个概念:
1. 当前页码(current_page):指正在展示的页码。
2. 每页展示的记录数(per_page):指一页需要展示的记录数量。
3. 总记录数(total):指总共需要展示的记录数量。
4. 最大页码数(max_pages):指显示的最多页码数量。
设计 JavaScript 分页页码算法的步骤如下:
1. 计算总页数:total_pages = Math.ceil(total / per_page),向上取整。
2. 分情况讨论当前页码的位置。
- 当前页码在最左侧(如1、2、3),从1开始递增显示至最大页码数或者总页数。
- 当前页码在中间部分(如4、5、6),从当前页码的前两页开始递增显示至当前页码的后两页,包括当前页码。
- 当前页码在最右侧(如7、8、9),从当前页码的后两页开始递减显示至当前页码的前两页,包括当前页码。
3. 显示第一页和最后一页的页码,例如总页数大于最大页码数时,第一页和最后一页的页码用“1”和“…”、“…”和最后一页的页码表示。
4. 显示上一页和下一页的页码,例如当当前页码为1时,上一页的页码不显示,当当前页码为总页数时,下一页的页码不显示。
下面是一个示例函数,输入分别为当前页码、每页记录数、总记录数、最大页码数量:
```javascript
function getPages(current_page, per_page, total, max_pages) {
var total_pages = Math.ceil(total / per_page);
var pages = [];
// 分情况讨论当前页码的位置
if (current_page <= 2) {
for (var i = 1; i <= Math.min(total_pages, max_pages); i++) {
pages.push(i);
}
} else if (current_page >= total_pages - 1) {
for (var i = Math.max(1, total_pages - max_pages + 1); i <= total_pages; i++) {
pages.push(i);
}
} else {
for (var i = current_page - 2; i <= current_page + 2; i++) {
pages.push(i);
}
}
// 显示第一页和最后一页的页码
if (total_pages > max_pages) {
if (pages[0] > 1) {
pages.unshift(1, '...');
}
if (pages[pages.length - 1] < total_pages) {
pages.push('...', total_pages);
}
}
// 显示上一页和下一页的页码
if (current_page !== 1) {
pages.unshift(current_page - 1);
}
if (current_page !== total_pages) {
pages.push(current_page + 1);
}
return pages;
}
```
这个函数将返回一个数组,包含要展示的页码。示例使用 for 循环逐步添加页码,把“…”显示出来,然后添加上一页和下一页的页码。