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

最新文章

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

热门文章

  1. Idea中的插件-列出Java Bean的所有set方法
  2. C语言 写的 表达式求值。
  3. Storm并行度详解
  4. 关于使用quartz动态增删改定时任务
  5. CF-798A
  6. dom4j的解析实例
  7. CodeForces Gym 100685E Epic Fail of a Genie (贪心,控制精度)
  8. HDU - 2037 今年暑假不AC 贪心(求序列中不重叠子序列的最大值问题)
  9. 51nod - 1659 - 数方块 - 简单数学
  10. apache2.4.35 403 forbidden 解决办法