jQuery插件pagination.js源码解读
2024-08-25 15:24:31
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);
} }
最新文章
- Android Studio开发Android应用如何签名
- 坑爹的微信支付v3,其实没有那么坑
- 转: GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean
- Glide 小知识点
- 【转】修改LINUX时间
- iOS开发——项目篇—高仿百思不得姐 05——发布界面、发表文字界面、重识 bounds、frame、scrollView
- 【转】Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds. If
- javascript解析引擎(每天有学习一点篇)
- gitignore无效最简单解决办法
- Delphi与Java中的日期互换
- CTF---Web入门第十二题 程序逻辑问题
- Servlet 自定义标签
- 利用Swashbuckle生成Web API Help Pages
- 2. maven的配置和使用
- js基础-基本包装类型
- Centos7安装Oracle 11gR2
- H5外部浏览器直接调起微信——通过url协议 weixin:// 判断是否安装微信及启动微信
- .NET Core 使用 EF 出错的解决方法
- flask 封装
- github view source