Jquery分页插件开发

xiaoxiao2021-02-28  95

/**  * pagination 分页插件  * @version 1.3  * @author xuhaiyang  * @调用方法  * $(selector).pagination();  *   * */ /**  * ========================================  * 知识点说明:  *   a(表达式)&&b(表达式) :  *         计算表达式a(也可以是函数)的运算结果  *         如果为true,执行表达式b(或函数),并返回b的结果  *         如果为false,返回a的结果  *     *   a(表达式)||b(表达式):  *     计算表达式a(也可以是函数)的运算结果,  *     如果为false,执行表达式b(或函数),并返回b的结果  *         如果为true,返回a的结果  *   *   转换规则:  *         对象为true,  *         非0数字为true,0为false  *         非空字符串为true,空为false  *         其他为false  *        * ========================================  */ ;(function(factory){ if(typeof define === "function" && (define.amd || define.cmd)&& !jQuery){ //AMD或CMD denfine(["jquery"],factory); }else if(typeof module === 'object' && module.exports){ // Node/CommonJS module.exports = function(root , jquery){ if ( jQuery === undefined ) {                 if ( typeof window !== 'undefined' ) {                     jQuery = require('jquery');                 } else {                     jQuery = require('jquery')(root);                 }             }             factory(jQuery);             return jQuery; }; }else{ //Browser globals         factory(jQuery); } }(function($){ //配置参数 var defaults = { totalData:0,     //数据总条数 showData:0,   //每页显示的条数 pageCount : 9,   //总页数,默认为9 current: 1, //当前第几页 prevCls : 'prev', //上一页class nextCls : 'next',   //下一页class prevContent : '<', //上一页内容 nextContent : '>',   //下一页内容 activeCls : 'active',   //当前页选中状态 coping: false,   //首页和尾页 isHide : false,   //当前页数为0页或者1页时不显示分页 homePage : '',   //首页节点内容 endPage : '',   //尾页节点内容 keepShowPN : false,   //是否一直显示上一页下一页 count:3,     //当前页前后分页个数 jump:false,   //跳转到指定页数         jumpIptCls : 'jump-ipt',//跳转文本框内容 jumpBtnCls :'jump-btn', //跳转按钮 jumpBtn : '跳转',       //跳转按钮文本 callBack:function(){}  //回调方法 }; var Pagination = function(element,options){ //全局变量 var opts = options,//配置    current,//当前页    $document = $(document),//容器    $obj = $(element);//容器 /** * 设置总页数 * @param 整形 page 页码 * @return opts.pageCount 总页数配置 */ this.setPageCount = function(page){ return opts.pageCount = page; }; /** * 获取总页数 * 如果配置了总条数和每页显示条数,将会自动计算总页数并略过总页数配置, * 反之 * @return 整形 p 总页数 */ this.getPageCount = function(){ return opts.totalData || opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount; }; /** * 获取当前页 * @return 整形 current 当前第几页 */ this.getCurrent = function(){ return current; }; /** * 填充数据 * @param 整形 index 页码 */ this.filling = function(index){ var html = ""; current = index || opts.current;//当前页码 var pageCount = this.getPageCount(); if( opts.keepShowPN || current > 1 ){ html += '<a href="javascript:;" class="'+opts.prevCls+'">'+opts.prevContent+'</a>'; }else{ if(opts.keepShowPN == false){ $obj.find('.'+ opts.prevCls) && $obj.find('.' + opts.prevCls).remove(); } } if(current >= opts.count + 2 && current != 1 && pageCount != opts.count){ var home = opts.coping && opts.homePage ? opts.homePage : '1'; html += opts.coping ? '<a href="javascript:;" data-page="1">'+home+'</a><span>...</span>' : ''; } var end = current + opts.count; var start = ''; //修复到最后一页时比第一页少显示两页 //修复到最后一页时比第一页少显示两页 start = current === pageCount ? current - opts.count - 2 : current - opts.count; ((start > 1 && current < opts.count) || current == 1) && end++; (current > pageCount - opts.count && current >= pageCount) && start++; for (;start <= end; start++) { if(start <= pageCount && start >= 1){ if(start != current){ html += '<a href="javascript:;" data-page="'+start+'">'+ start +'</a>'; }else{ html += '<span class="'+opts.activeCls+'">'+start+'</span>'; } } } if(current + opts.count < pageCount && current >= 1 && pageCount > opts.count){ var end = opts.coping && opts.endPage ? opts.endPage : pageCount; html += opts.coping ? '<span>...</span><a href="javascript:;" data-page="'+pageCount+'">'+end+'</a>' : ''; } if(opts.keepShowPN || current < pageCount){//下一页 html += '<a href="javascript:;" class="'+opts.nextCls+'">'+opts.nextContent+'</a>' }else{ if(opts.keepShowPN == false){ $obj.find('.'+opts.nextCls) && $obj.find('.'+opts.nextCls).remove(); } } html += opts.jump ? '<input type="text" class="'+opts.jumpIptCls+'"><a href="javascript:;" class="'+opts.jumpBtnCls+'">'+opts.jumpBtn+'</a>' : ''; $obj.empty().html(html); }; //绑定事件 this.eventBind = function(){ var that = this; var pageCount = that.getPageCount();//总页数 var index = 1; $obj.off().on('click','a',function(){ if($(this).hasClass(opts.nextCls)){ if($obj.find('.'+opts.activeCls).text() >= pageCount){ $(this).addClass('disabled'); return false; }else{ index = parseInt($obj.find('.'+opts.activeCls).text()) + 1; } }else if($(this).hasClass(opts.prevCls)){ if($obj.find('.'+opts.activeCls).text() <= 1){ $(this).addClass('disabled'); return false; }else{ index = parseInt($obj.find('.'+opts.activeCls).text()) - 1; } }else if($(this).hasClass(opts.jumpBtnCls)){ if($obj.find('.'+opts.jumpIptCls).val() !== ''){ index = parseInt($obj.find('.'+opts.jumpIptCls).val()); }else{ return; } }else{ index = parseInt($(this).data('page')); } that.filling(index); typeof opts.callback === 'function' && opts.callback(that); }); //输入跳转的页码 $obj.on('input propertychange','.'+opts.jumpIptCls,function(){ var $this = $(this); var val = $this.val(); var reg = /[^\d]/g;            if (reg.test(val)) {                $this.val(val.replace(reg, ''));            }            (parseInt(val) > pageCount) && $this.val(pageCount);            if(parseInt(val) === 0){//最小值为1             $this.val(1);            } }); //回车跳转指定页码 $document.keydown(function(e){        if(e.keyCode == 13 && $obj.find('.'+opts.jumpIptCls).val()){         var index = parseInt($obj.find('.'+opts.jumpIptCls).val());            that.filling(index); typeof opts.callback === 'function' && opts.callback(that);        }    }); }; //初始化 this.init = function(){ this.filling(opts.current); this.eventBind(); if(opts.isHide && this.getPageCount() == '1' || this.getPageCount() == '0') $obj.hide(); }; this.init(); }; $.fn.pagination = function(parameter,callback){ if(typeof parameter == 'function'){//重载 callback = parameter; parameter = {}; }else{ parameter = parameter || {}; callback = callback || function(){} } var options = $.extend({},defaults,parameter); return this.each(function(){ var pagination = new Pagination(this,options); callback(pagination); }); }; }));
转载请注明原文地址: https://www.6miu.com/read-78213.html

最新回复(0)