npm 包 express-paginatorjs 的使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

express-paginatorjs 是一个简单而强大的分页器，可以快速生成一个分页器，让前端应用能够更好的展现数据。它可以被集成到任何 web 应用中，还能自定义样式，非常适合前端开发人员使用。

安装

可以使用 npm 来安装 express-paginatorjs：npm install express-paginatorjs

快速开始

下面是一个最基本的使用示例：

-- -------------------- ---- -------
----- ---------------- - -------------------------------

-- ------
----- ---- - -
    ---- -- ----- ---------
    ---- -- ----- -------
    ---- -- ----- -----------
    ---- -- ----- ---------
    ---- -- ----- -------
    ---- -- ----- ------
--

-- ----
----- ------- - --

-- ------
----- --------- - ----------------------------- ---------

-- --------
----- --------- - ------------------------------- -------------------- - ---

-- -----
----- ----- - ----------------------

-- ------
----- ----------- - ------------------------

-- -----
----- --------- - ------------------

-------------- - ------ -----------
------------------- -------
-------------------- -------------
------------------- -----------

页面会输出如下结果：

第 1 页数据： [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}]
总页数： 2
当前页码： 1
分页器： <ul class="paginator"><li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li><li><a href="/?page=2">2</a></li><li><a href="/?page=2" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul>

API

expressPaginator(total: number, perPage: number, options?: object): object

参数

total (number): 总记录数
perPage (number): 每页显示的记录数
options (object): 可选参数
- baseURL: 分页URL地址
- current: 当前页码
- alignment: 对齐方式
- showPreviousNextButtons: 显示‘上一页’和‘下一页’按钮
- previousText: ‘上一页’按钮文字
- nextText: ‘下一页’按钮文字
- stepLinks: 步进链接数量
- showFirstLastButtons: 显示‘首页’和‘尾页’按钮
- firstText: ‘首页’按钮文字
- lastText: ‘尾页’按钮文字
- ellipsisText: 省略文字

返回值

返回对象包含以下属性：

limit：限制记录数
pages: 页数信息
pager: 页码分页器

limit

limit 属性包含以下属性：

low：当前页第一条记录
high：当前页最后一条记录

pager

pager 属性将生成一个 HTML 字符串，其中包含所有的页码链接和按钮。

示例

基本使用

const expressPaginator = require('express-paginatorjs');
const data = [...];
const perPage = 3;
const paginator = expressPaginator(data.length, perPage);
const firstPage = data.slice(paginator.limit.low, paginator.limit.high + 1);
const total = paginator.pages.total;
const currentPage = paginator.pages.current;
const pagerHTML = paginator.pager();

通过 option 参数进行配置

-- -------------------- ---- -------
----- ---------------- - -------------------------------
----- ---- - ------
----- ------- - --
----- ------- - -
    -------- --------------------
    -------- --
    ---------- ---------
    ------------------------ -----
    ------------- -----------
    --------- -----------
    ---------- --
    --------------------- -----
    ---------- ----------
    --------- ----------
    ------------- -----------
--
----- --------- - ----------------------------- -------- ---------
----- --------- - ------------------------------- -------------------- - ---
----- ----- - ----------------------
----- ----------- - ------------------------
----- --------- - ------------------

结论

我们已经看到，使用 express-paginatorjs 可以轻松地添加分页器到任何 web 应用程序中。它是一个非常灵活和强大的 JavaScript 库，提供许多有用的功能和参数，可以快速和轻松地对分页器进行个性化定制。因此，对于前端开发人员来说，它是一个非常有用的工具，可以大大提高开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055cb181e8991b448da176