首页 | 6279 | 1048 | 3470 | 添加收藏 上一个 下一个
原生js实现的分页插件(原创)

使用方法


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实例生成分页组件。