原生js实现的分页插件（原创）

 查看演示  website  立即下载

更新时间：2019-12-23 21:03:57

使用方法

1、引入custom-pagination.min.css和custom-pagination.min.js。

<link rel="stylesheet" href="custom-pagination.min.css" />
<script type="text/javascript" src="custom-pagination.min.js"></script>

2、创建一个页码容器，设定宽高度，必须设置，id随便设置。

 <div id="page" class="page"></div>

3、创建CustomPagination实例生成分页组件，只有total和changePage两个属性是必须的。

var box = new CustomPagination('#page', {
     total: 100,//总页数
     changePage: function (pageNum) {//切换页码成功回调
       console.log('当前页码：'+pageNum)
     }
});

注意：其他参数/方法说明。

var options = {
       next_prev_links: 'yes',//是否开启[上一页/下一页]
       inupt_forward: 'yes',//是否开启[输入跳转]
       total: 10,//总页数（必需）
       count: 6,//显示的页码个数，多余页码会用...代替
       changePage: function (pageNum) {}//页码发生改变时调用（必需）
}
var box = new CustomPagination('#容器id', options);
.box.destroy();//销毁分页组件

如果总页码发生了改变，可以先销毁分页组件，然后再重新new CustomPagination实例生成分页组件。

PREVIOUS:
NEXT:
jQuery树形下拉框插件multipleTree升级
原生js 刻度尺（PC端、移动端）