jQuery pager.js 插件动态分页功能实例分析
前端  /  管理员 发布于 4年前   314
本文实例讲述了jQuery pager.js 插件动态分页功能。分享给大家供大家参考,具体如下:
pager.js 代码
function Page(opt){ var set = $.extend({num:null,startnum:1,elem:null,callback:null},opt||{}); if(set.startnum>set.num||set.startnum<1){ set.startnum = 1; } var n = 0,htm = ''; var clickpages = { elem:set.elem, num:set.num, callback:set.callback, init:function(){ this.elem.next('div.pageJump').children('.button').unbind('click') this.JumpPages(); this.elem.children('li').click(function () { var txt = $(this).children('a').text(); var page = '', ele = null; var page1 = parseInt(clickpages.elem.children('li.active').attr('page')); if (isNaN(parseInt(txt))) { switch (txt) { case '下一页': if (page1 == clickpages.num) { return; } if (page1 >= (clickpages.num - 2) || clickpages.num <= 6 || page1 < 3) { ele = clickpages.elem.children('li.active').next(); } else { clickpages.newPages('next', page1 + 1); ele = clickpages.elem.children('li.active'); } break; case '上一页': if (page1 == '1') { return; } if (page1 >= (clickpages.num - 1) || page1 <= 3 || clickpages.num <= 6) { ele = clickpages.elem.children('li.active').prev(); } else { clickpages.newPages('prev', page1 - 1); ele = clickpages.elem.children('li.active'); } break; case '首页': if (page1 == '1') { return; } if (clickpages.num > 6) { clickpages.newPages('首页', 1); } ele = clickpages.elem.children('li[page=1]'); break; case '尾页': if (page1 == clickpages.num) { return; } if (clickpages.num > 6) { clickpages.newPages('尾页', clickpages.num); } ele = clickpages.elem.children('li[page=' + clickpages.num + ']'); break; case '...': return; } } else { // if ((parseInt(txt) >= (clickpages.num - 3) || parseInt(txt) <= 3) && clickpages.num > 6) { // clickpages.newPages('jump', parseInt(txt)); // } // ele = $(this); // } // page = clickpages.actPages(ele); // if (page != '' && page != page1) { // if (clickpages.callback){ // clickpages.callback(parseInt(page)); // } var i = parseInt(txt); if(isNaN(i)||(i<=0)||i>clickpages.num){ return; }else if(clickpages.num>6){ clickpages.newPages('jump',i); }else{ var ele = clickpages.elem.children('li[page='+i+']'); clickpages.actPages(ele); if (clickpages.callback){ clickpages.callback(i); } return; } if (clickpages.callback){ clickpages.callback(i); } } }); }, //active actPages:function (ele) { ele.addClass('active').siblings().removeClass('active'); return clickpages.elem.children('li.active').text(); }, JumpPages:function () { this.elem.next('div.pageJump').children('.button').click(function(){ var i = parseInt($(this).siblings('input').val()); if(isNaN(i)||(i<=0)||i>clickpages.num){ return; }else if(clickpages.num>6){ clickpages.newPages('jump',i); }else{ var ele = clickpages.elem.children('li[page='+i+']'); clickpages.actPages(ele); if (clickpages.callback){ clickpages.callback(i); } return; } if (clickpages.callback){ clickpages.callback(i); } }) }, //newpages newPages:function (type, i) { var html = "",htmlLeft="",htmlRight="",htmlC=""; var HL = '
上面是 pager.js部分
html部分
前往 页更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
- jquery.pager.js分页实现详解
- jquery.pager.js实现分页效果
- 详解MVC如何使用开源分页插件(shenniu.pager.js)
- 用jQuery中的ajax分页实现代码
- JQuery+Ajax无刷新分页的实例代码
- 基于jQuery的实现简单的分页控件
- 基于JQuery的Pager分页器实现代码
- jQuery中jqGrid分页实现代码
- jQuery DataTables插件自定义Ajax分页实例解析
- jquery pagination插件实现无刷新分页代码
- jquery向上向下取整适合分页查询
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号