首页 > 代码库 > jQuery插件pagination.js源码解读
jQuery插件pagination.js源码解读
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源码解读
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。