基于JQ封装的分页插件

最近写了有一段时间JQ，做列表分页之类的项目太多，于是把分页封装了一个简单的组件，具体的封装如下。

扩展JQ的静态方法

HTML部分

复制代码

CSS部分

.pagination { /* display: -webkit-flex; display: flex; */ display: none; justify-content: flex-end; list-style: none; overflow: hidden; font-size: 14px;}.pagination li { padding: 6px 10px; line-height: 1.5; border: 1px solid #e0e0e0; border-right: none; cursor: pointer;}.pagination li:last-of-type { border-right: 1px solid #e0e0e0;}.pagination li a { text-decoration: none;}.pagination li a:link,.pagination li a:hover,.pagination li a:visited,.pagination li a:active { color: #666666;}.pagination li.active a { color: #c2e2f1;}.pagination li.disable { pointer-events: none; cursor: default;}复制代码

js部分

;(function($, window, undefined) { var totPage = ”, curPage = ”; var defaultOpts = { container: ‘.pagination’, totalLists: null, //需要和pageSize组合使用 pageSize: 10, totalPage: null, //可单独使用，不传totalLists、pageSize currentPage: 1, disabledColor: ‘#666’, normalColor: ‘#000’, callBack: null, } var Pagination = function(opts){ this.settings = $.extend({},defaultOpts,opts); totPage = this.settings.totalPage || Math.ceil(this.settings.totalLists/this.settings.pageSize); curPage = this.settings.currentPage; this.init(); } Pagination.prototype = { init: function(){ this.creatPage(totPage,curPage); this.bindEvent(); }, creatPage: function(totPage,curPage){ var _this = this, _container = $(_this.settings.container); // 小于1页时隐藏分页组件 if(totPage totPage) { //假定展示的结束页码数大于总页码数 endIndex = totPage; //结束页重置为总页码数 //结束页码数倒推4个页码数大于0，即开始展示的页码数为 x-4，否则重置为1 startIndex = (endIndex-4) > 0 ? endIndex-4 : 1; } // 生成页码 var $li = ‘首页’; // 生成前面可能的… if(startIndex>=2 && totPage>5){ $li += ‘…’; } for (var i = startIndex; i 0 ? endIndex-4 : 1; } // 生成页码 var $li = ‘首页’; // 生成前面可能的… if(startIndex>=2 && totPage>5){ $li += ‘…’; } for (var i = startIndex; i