码迷,mamicode.com
首页 > Web开发 > 详细

jQuery插件pagination.js源码解读

时间:2014-12-23 01:31:55      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:

pagination的github地址:https://github.com/gbirke/jquery_pagination

 

公司用的是1.2的版本,所以我就读1.2的了。

jQuery.fn.pagination = function(maxentries, opts){
  opts = $.extend({
  isCurrentInfo: false,//是否显示当前页信息: 当前第1页,共10页
  currentCls: ‘.current-info‘,//当前页class
  items_per_page:10,//每页最多有几项
  num_display_entries:10,//中间的页数 如 1 2 ... 5 6 7 8 9 ... 12 13 中间页数是5
  current_page:0,//当前页
  num_edge_entries:1,//两端页数 如 1 2...5 6 7 8 9...12 13两端页数是2
  link_to:"javascript:;",//href
  prev_text:"上一页",
  next_text:"下一页",
  ellipse_text:"...",//省略的页数的文本
  prev_show_always:true,//总是显示上一页
  next_show_always:true,//总是显示下一页
  callback:function(){return false;}//回调
},opts||{});
    return this.each(function() {
            //code
        });
};

 

我们需要给pagination方法传递2个参数,

maxentries:总共有多少项,必填

opts,各种配置项,都为选填。

 

function numPages(){}计算总页数

function getInterval(){} 获取中间页数这里的开始页和结束页,作为数组返回[5,10]

function pageSelected(page_id, evt){} 分页的链接处理函数

function drawLinks() {}绘制链接

关键就是drawLinks:

function drawLinks() {
    panel.empty();//每一次绘制都是全部重绘
    var interval = getInterval();//获取开始和结束页
    var np = numPages();//获取总页数
    //pageSelected获取到当前页,然后重绘了链接
    var getClickHandler = function(page_id) {
        return function(evt){ return pageSelected(page_id,evt); }
    }
    // 添加一个单连接
    var appendItem = function(page_id, appendopts){
        page_id = page_id<0?0:(page_id<np?page_id:np-1);
        appendopts = $.extend({text:page_id+1, classes:""}, appendopts||{});
        if(page_id == current_page){//如果是当前页,生成span
            var lnk = $("<span class=‘current‘>"+(appendopts.text)+"</span>");
        }
        else{//否则生成超链接
            var lnk = $("<a>"+(appendopts.text)+"</a>")
                .bind("click", getClickHandler(page_id))//点击超链接时回调
                .attr(‘href‘, opts.link_to.replace(/__id__/,page_id));
        }
        if(appendopts.classes){lnk.addClass(appendopts.classes);}//添加class
        panel.append(lnk);//将连接append到panel
    }
    // 绘制上一页
    if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
        appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
    }
    // 绘制起始点  1 2 ...
    if (interval[0] > 0 && opts.num_edge_entries > 0)
    {
        var end = Math.min(opts.num_edge_entries, interval[0]);
        for(var i=0; i<end; i++) {
            appendItem(i);
        }
        if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
        {
            $("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
        }
    }
    // 绘制中间部分的连接 5 6 7 8 9
    for(var i=interval[0]; i<interval[1]; i++) {
        appendItem(i);
    } 
    // 绘制结束点 ...12 13
    if (interval[1] < np && opts.num_edge_entries > 0)
    {
        if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
        {
            $("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
        }
        var begin = Math.max(np-opts.num_edge_entries, interval[1]);
        for(var i=begin; i<np; i++) {
            appendItem(i);
        }
        
    }
    // 绘制下一页
    if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
        appendItem(current_page+1,{text:opts.next_text, classes:"next"});
    }
    // 绘制当前第几页,共几页
    if(opts.isCurrentInfo){
        var sInfo = ‘当前第 ‘ + (current_page + 1) + ‘ 页,共 ‘ + np + ‘ 页‘;
        $(opts.currentCls).html(sInfo);                        
    }

}

 

jQuery插件pagination.js源码解读

标签:

原文地址:http://www.cnblogs.com/qianlegeqian/p/4179307.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!