javascript - 带范围的简单分页算法
问题描述
function generatePageRange(currentPage, lastPage) {
const delta = 2;
const range = [];
for (let i = Math.max(2, (currentPage - delta)); i <= Math.min((lastPage - 1), (currentPage + delta)); i += 1) {
range.push(i);
}
if ((currentPage - delta) > 2) {
range.unshift('...');
}
if ((currentPage + delta) < (lastPage - 1)) {
range.push('...');
}
range.unshift(1);
if (lastPage !== 1) range.push(lastPage);
return range;
}
console.log('Selected page ${i}:', generatePageRange(5, 10));
我有一个总页面和页面范围以及当前页面。
电流输出 [1, "...", 3, 4, 5, 6, 7, "...", 10]
预期产出
总页数 = 10,范围 = 5
页码 1 => 1, 2, 3, ---, 10
页码 2 => 1,2,3, ---, 10
页码 3 => ---, 3,4,---,10
页码 4 => ---, 4,5,---,10
页码 10 => 1, --- , 8, 9,10
解决方案
对于非动态方法,您可以将 resilt 分为三个部分,其中不同的实际页面创建不同的数组。
function getPagination(page, total) {
if (page < 3) return [1, 2, 3, '...', total];
if (page < total - 2) return ['...', page - 1, page, '...', total];
return [1, '...', total - 2, total - 1, total];
}
for (let i = 1; i <= 10; i++) console.log(i, ':', ...getPagination(i, 10));
.as-console-wrapper { max-height: 100% !important; top: 0; }
推荐阅读
- shell - 在 unix 中搜索扩展 asci 字符
- java - RecyclerView .addTextChangedListener 给出多个位置
- angular - Chrome 文件浏览器 - 访问完整路径
- visual-studio-code - 在 vscode 中选择包含常用短语的不相邻行
- php - 需要序列化程序在获取请求时序列化连字符而不是下划线
- sql - 将日期更改为字符串
- ms-word - 如何使用 Visual Basic 6 为 Microsoft Word 创建可停靠的无模式对话框
- javascript - 使用 SQL 值实时更新 HighCharts
- android - .wav 文件 url 无法在 Android oreo 和 pie 设备中播放
- c++ - 为什么模板推导需要默认模板?