jquery分页插件jqPaginator

PetitQ 其他代码 2018-11-06 2.76K 0 0

jqPaginator.js 是一款强大的 jquery 分页插件。该 jquery 分页插件简洁大方，可以高度自定义，适用于多种场景。

使用方法:

在页面中引入 jquery 和 jqPaginator.js 文件。

也想出现在这里？联系我们吧

<script src="js/jquery.min.js"></script>

<script src="js/jqPaginator.js"></script>

HTML 结构:

使用一个[ul]元素来作为分页组件的容器。

<ul class="pagination" id="pagination1"></ul>

初始化插件:

在页面 DOM 元素加载完毕之后，通过下面的方法来完成对该分页组件的初始化。

```
$('#pagination1').jqPaginator({
```
```
    totalPages: 100,
```
```
    visiblePages: 10,
```
```
    currentPage: 1,
```
```
 
```

    first: '<li class="first"><a href="javascript:void(0);">First</a></li>',

    prev: '<li class="prev"><a href="javascript:void(0);">Previous</a></li>',

    next: '<li class="next"><a href="javascript:void(0);">Next</a></li>',

    last: '<li class="last"><a href="javascript:void(0);">Last</a></li>',

    page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',

```
    onPageChange: function (num) {
```

        $('#text').html('当前第' + num + '页');

```
    }
```
```
});
```

配置参数:

jqPaginator 分页插件的可用配置参数如下：

参数	默认值	描述
totalPages	0	设置分页的总页数
totalCounts	0	设置分页的总条目数
pageSize	0	设置每一页的条目数。注意：要么设置 totalPages，要么设置 totalCounts + pageSize，否则报错；设置了 totalCounts 和 pageSize 后，会自动计算出 totalPages。
currentPage	1	设置当前的页码
visiblePages	7	设置最多显示的页码数（例如有 100 页，当前第 1 页，则显示 1 - 7 页）
disableClass	`'disabled'`	设置首页，上一页，下一页，末页的“禁用状态”样式
activeClass	`'active'`	设置当前页码样式
first	bootstrap 风格	设置“首页”的 Html 结构
prev	bootstrap 风格	设置“上一页”的 Html 结构
next	bootstrap 风格	设置“下一页”的 Html 结构
last	bootstrap 风格	设置“末页”的 Html 结构
page	bootstrap 风格	设置页码的 Html 结构,其中可以使用{{page}}代表当前页，{{totalPages}}代表总页数，{{totalCounts}}代表总条目数（例如：上面的“极简风格”的 Demo，就是使用了{{占位符}}，并将 visiblePages 设为 1 实现的。）注意：first、prev、next、last。page 只要设置一个，其余未设置的会变为空。
wrapper	(无)	分页结构的 Html 包裹，例如：`<div class="your class"></div>`，一般不会用到
onPageChange	(无)	回调函数，当换页时触发（包括初始化第一页的时候），会传入两个参数： 1、“目标页"的页码，Number 类型 2、触发类型，可能的值：“init”（初始化），“change”（点击分页）