# @bramus/pagination-sequence 中文文档

规范地址：https://npmcn.com/package/%40bramus/pagination-sequence/

版本：1\.2\.1
npm 元数据更新时间：2023-07-18T20:09:53.762Z
中文译文更新时间：2026-11-08T13:54:40.454Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bramus/pagination-sequence
原文对照：https://npmcn.com/package/%40bramus/pagination-sequence/?lang=original
项目主页：https://github.com/bramus/js-pagination-sequence#readme
源码仓库：https://github.com/bramus/js-pagination-sequence

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：34.3 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：1 个
- 首次发布：2021-12-05T23:04:46.108Z
- 最新版本发布：2023-07-18T20:09:53.583Z
- 近 30 天下载量：10763（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 0 个）

## 中文简介

生成一个数字序列, 用于 Pagination 组件, 聪明的方法 .

## 安装

```sh
npm install @bramus/pagination-sequence
```

也可以使用：`pnpm add @bramus/pagination-sequence`、`yarn add @bramus/pagination-sequence`、`bun add @bramus/pagination-sequence`

## README

[![JavaScript Pagination Sequence Generator](https://npmcn.com/package/%40bramus/pagination-sequence/screenshots/js-pagination-sequence.png)](https://codepen.io/bramus/pen/NWaxNKQ)

# JavaScript 移植序列生成器

生成一个数字序列, 用于 Pagination 组件, 聪明的方法 .

## 安装

```bash
npm i @bramus/pagination-sequence
```

## 用法/ 实例

这个库作为ES模块而来,并暴露出一个函数/算术来生成一系列的pagination条目.

```js
import { generate } from '@bramus/pagination-sequence';

const sequence = generate(67, 74);
// ~> [1, 2, '…', 65, 66, 67, 68, 69, '…', 73, 74]
```

或者,你可以使用 `generateFromObj` 它接受配置对象作为参数 :

```js
import { generateFromObj } from '@bramus/pagination-sequence';

const sequence = generateFromObj({
    curPage: 67,
    numPages: 74,
});
// ~> [1, 2, '…', 65, 66, 67, 68, 69, '…', 73, 74]
```

请注意, 这是一个框架不可知库: 生成的数组不是以任何方式提供, 而是必须输入到您的 Pagenation 组件中进行渲染 .

寻找一些Pagination组件的灵感? 见 [整合实例](https://npmcn.com/package/%40bramus/pagination-sequence/#readme-integration-examples) 下面可以查看如何使用 JavaScript 框架 Du JourTM .

## API 密码

### `generate()`

被曝光者 `generate` 函数有下列 API :

```js
generate(curPage, numPages, numPagesAtEdges = 2, numPagesAroundCurrent = 2, glue = '…');
```

参数:

-   `curPage`: 当前活动页面
-   `numPages`: 页数总数
-   `numPagesAtEdges` _(默认: 2)_: 在外缘显示的页数.
-   `numPagesAroundCurrent` _(默认: 2)_: 活动页面周围显示的页面数.
-   `glue` _(默认 : “... ” )_: 当出现缺口时显示的字符串

### `generateFromObj()`

这个 `generateFromObj` 函数接受单个 `opts` 对象。 其成员都是上述参数。 尽可能设置默认值 .

```js
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](https://codepen.io/bramus/pen/NWaxNKQ)

```jsx
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="&laquo;" isDisabled={curPage === 1} />
            <PaginationEntry data-pagination-prev onEntryClick={onEntryClick} value={curPage-1} title="Go to Previous Page" label="&lsaquo;" 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="&rsaquo;" isDisabled={curPage === numPages} />
            <PaginationEntry data-pagination-next onEntryClick={onEntryClick} value={numPages} title="Go to Last Page" label="&raquo;" 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](https://gist.github.com/bramus/5d8f2e0269e57dff5136) _(原始内容,2014年起)_
-   _(通过公关 添加自己的)_

## 常见问题

### @bramus/pagination-sequence 是什么？

生成一个数字序列, 用于 Pagination 组件, 聪明的方法 \.

### 如何安装 @bramus/pagination-sequence？

在项目目录运行 npm install @bramus/pagination-sequence，或使用 pnpm add / yarn add / bun add。

### @bramus/pagination-sequence 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/bramus\_\_pagination-sequence 是否存在。

### @bramus/pagination-sequence 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bramus/pagination-sequence 可以商用吗？

@bramus/pagination-sequence 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bramus/pagination-sequence 的下载量有多少？

根据 npm 官方下载统计，@bramus/pagination-sequence 在 2026/10/09 – 2026/11/07 这 30 天内被下载 10,763 次，日均约 359 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bramus/pagination-sequence 还在维护吗？

最新版本 1\.2\.1 发布于 2023/07/19（3 年前）；至今共发布 11 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/12/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。