JavaScript 移植序列生成器
生成一个数字序列, 用于 Pagination 组件, 聪明的方法 .
安装
npm i @bramus/pagination-sequence
用法/ 实例
这个库作为ES模块而来,并暴露出一个函数/算术来生成一系列的pagination条目.
import { generate } from '@bramus/pagination-sequence';
const sequence = generate(67, 74);
// ~> [1, 2, '…', 65, 66, 67, 68, 69, '…', 73, 74]
或者,你可以使用 generateFromObj 它接受配置对象作为参数 :
import { generateFromObj } from '@bramus/pagination-sequence';
const sequence = generateFromObj({
curPage: 67,
numPages: 74,
});
// ~> [1, 2, '…', 65, 66, 67, 68, 69, '…', 73, 74]
请注意, 这是一个框架不可知库: 生成的数组不是以任何方式提供, 而是必须输入到您的 Pagenation 组件中进行渲染 .
寻找一些Pagination组件的灵感? 见 整合实例 下面可以查看如何使用 JavaScript 框架 Du JourTM .
API 密码
generate()
被曝光者 generate 函数有下列 API :
generate(curPage, numPages, numPagesAtEdges = 2, numPagesAroundCurrent = 2, glue = '…');
参数:
curPage: 当前活动页面numPages: 页数总数numPagesAtEdges(默认: 2): 在外缘显示的页数.numPagesAroundCurrent(默认: 2): 活动页面周围显示的页面数.glue(默认 : “... ” ): 当出现缺口时显示的字符串
generateFromObj()
这个 generateFromObj 函数接受单个 opts 对象。 其成员都是上述参数。 尽可能设置默认值 .
const {
curPage = 1,
numPages = 1,
numPagesAtEdges = 2,
numPagesAroundCurrent = 2,
glue = '…',
} = opts;
原则
该算法有观点并遵循了这些原则:
-
稳定输出
当生成一个序列时,它总是会生成相同数量的条目,任何
curPage数值。 当在系列边缘查看一页时,这会导致numPagesAtEdges无人理睬.例如:没有
generate(2, 12, 1, 1)返回时01-[02]-03-..-12(5个条目)它会回来01-[02]-03-04-05-..-12(7个条目)这是一个刻意的选择,因为generate(7, 12, 1, 1)还会返回 7 个条目 :01-..-06-[07]-08-..-12。 。 。 .在生成稳定的条目后,在屏幕上渲染时,输出也会是视觉上稳定的.
-
总是包含到边缘的链接
该算法将始终包含第一页和最后一页的链接.
示例:在查看第50页第25页时,算法会包含一个与第1页和50页的链接.
-
无不必要的空白
当算法检测到一个只有"1项宽"的空隙时,它将用实际数字来取而代之.
举个例子:一个愚蠢的选择
generate(4, 9, 1, 1),将生成01-..-03-[04]-05-..-09。算法将第一个缺口更正为02将返回01-02-03-[04]-05-..-09换句话说.
整合实例
反应
尝试在线: https://codepen.io/bramus/pen/NWaxNKQ 互联网档案馆的存檔,存档日期2013-12-02
import React from "react";
import ReactDOM from "react-dom";
import { generate } from "@bramus/pagination-sequence";
const BASE_URL = '#';
const PaginationEntry = ({ value, onEntryClick = null, label = null, title = null, isCurrent = false, isDisabled = false, ...props }) => {
label ??= value;
title ??= `Go to page ${value}`;
const onClick = (e) => {
e.stopPropagation();
e.preventDefault();
e.target.blur();
if (onEntryClick) {
onEntryClick(value);
}
}
if (value == '…') {
return (
<li data-pagination-ellipsis {...props}><span>{label}</span></li>
);
}
if (isDisabled) {
return (
<li data-pagination-disabled {...props}><span>{label}</span></li>
);
}
if (isCurrent) {
props['data-pagination-current'] = true;
}
return (
<li {...props}>
<a href={`${BASE_URL}/page/${value}`} title={title} onClick={onClick}>{label}</a>
</li>
);
}
const Pagination = ({ curPage, numPages, numPagesAtEdges = 2, numPagesAroundCurrent = 2, onEntryClick = null }) => {
const sequence = generate(curPage, numPages, numPagesAtEdges, numPagesAroundCurrent);
// console.log(sequence);
return (
<ul className="pagination">
<PaginationEntry data-pagination-first onEntryClick={onEntryClick} value={1} title="Go to First Page" label="«" isDisabled={curPage === 1} />
<PaginationEntry data-pagination-prev onEntryClick={onEntryClick} value={curPage-1} title="Go to Previous Page" label="‹" isDisabled={curPage === 1} />
{sequence.map((val, idx) =>
<PaginationEntry key={`page-${(val == '…') ? `…-${idx}` : val}`} onEntryClick={onEntryClick} value={val} isCurrent={val == curPage} />
)}
<PaginationEntry data-pagination-next onEntryClick={onEntryClick} value={curPage+1} title="Go to Next Page" label="›" isDisabled={curPage === numPages} />
<PaginationEntry data-pagination-next onEntryClick={onEntryClick} value={numPages} title="Go to Last Page" label="»" isDisabled={curPage === numPages} />
</ul>
);
}
ReactDOM.render(
<Pagination curPage={25} numPages={50} onEntryClick={(val) => { console.log(val)}} />,
document.getElementById('root')
);
许可证
@bramus/pagination-sequence 以麻省理工学院公共许可证发放。 见附件 LICENSE 详细情况.
其他语言执行
以另一种编程语言寻求执行?
- ƯΜ㼯A https://gist.github.com/bramus/5d8f2e0269e57dff5136 互联网档案馆的存檔,存档日期2013-12-2 (原始内容,2014年起)
- (通过公关 添加自己的)