之前在segmenfault讨论的时候,遇到了js如何实现响应时的分页显示。

虽然只是一个分页,但是代码差不多也有200多行了,因为需要考虑的内容也很多,但还是实现了。

GitHub:

GitOSC:

PostbirdPaginatorDriver.js

JS 分页驱动

优点:

  • 可以自动获取当前页,并进行响应式显示
  • 不污染url,GET参数可正常再次传递
  • 可配置性高,多种显示选择

使用方式:

1. 引入文件:

PostbirdPaginatorDriver.js
PostbirdPaginatorDriver.css

2. 需要一个存放分页的容器如:

<ul id="pager"></ul>

3. 初始化驱动

PostbirdPaginatorDriver.init({ pageBox: "#pager", totalPage: 25 });

配置选项:

名称 意义 是否必须
pageBox 存放分页的容器选择器
totalPage 总页数 不传输默认为 1 否:但建议传输
currentPage 当前页 否 可以通过currentPageBySelf 自动获取
currentPageBySelf 是否自动获取当前页 否 默认true
pageMin 最小显示长度 分页数低于这个长度全部打印 否 默认 5
url 链接 否 默认为location.href
pageParam 分页参数名称 否 默认为page
pageClass 分页li的class name 否 默认为page-item
showPreviusNextPage 是否显示前一页后一页 否 默认为true
showFirstLastPage 是否显示首页和尾页 否 默认为true
previusPageText 前一页的文字 可以是html代码 否 默认为 «
nextPageText 后一页的文字 可以是html代码 否 默认为 »
firstPageText 首页的文字 可以是html代码 否 默认为 首页
lastPageText 尾页的文字 可以是html代码 否 默认为 尾页

效果:

demo.jpg