Jquery分页插件开发

/**
 * 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);
});


};


}));



















  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值