jQuery pager.js 插件动态分页功能实例分析


Posted in jQuery onAugust 02, 2019

本文实例讲述了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 = '<li><a>...</a></li>';
      html = '<li class="topEnd"><a aria-label="Previous">首页</a></li>'
      for (var n = 0;n<5;n++){
        htmlC += '<li '+((n-1)==0?'class="active"':'')+' page="'+(i+n-1)+'"><a>'+(i+n-1)+'</a></li>';
        htmlLeft += '<li '+((n+2)==i?'class="active"':'')+' page="'+(n+2)+'"><a>'+(n+2)+'</a></li>';
        htmlRight += '<li '+((set.num+n-5)==i?'class="active"':'')+' page="'+(set.num+n-5)+'"><a>'+(set.num+n-5)+'</a></li>';
      }
      switch (type) {
        case "next":
         if(i<=4){
           html+='<li page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }else if(i>=(set.num-3)){
           html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }else{
           html += '<li page="1"><a>1</a></li>'+HL+htmlC+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }
         break;
        case "prev":
         if(i<=4){
           html+='<li page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }else if(i>=(set.num-3)){
           html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }else{
           html += '<li page="1"><a>1</a></li>'+HL+htmlC+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }
         break;
        case "首页" :
         html+='<li class="active" page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         break;
        case "尾页" :
         html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li class="active" page="'+set.num+'"><a>'+set.num+'</a></li>';
         break;
        case "jump" :
         if(i<=4){
           if(i==1){
            html+='<li class="active" page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
           }else{
            html+='<li page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
           }
         }else if((i>=set.num-3)&&(set.num>=7)){
           if(i==set.num){
            html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li class="active" page="'+set.num+'"><a>'+set.num+'</a></li>';
           }else{
            html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
           }
         }else{
           html += '<li page="1"><a>1</a></li>'+HL+htmlC+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
         }
      }
      html += '<li class="topEnd"><a aria-label="Next">尾页</a></li>';
      if (this.num > 5 || this.num < 3) {
        set.elem.html(html);
        clickpages.init({num:set.num,elem:set.elem,callback:set.callback});
      }
     }
   }
   if(set.num<=1){
     $(".pagination").html('');
     return;
   }else if(parseInt(set.num)<=6){
     n = parseInt(set.num);
     var html='<li class="topEnd"><a aria-label="Previous">首页</a></li>';
     for(var i=1;i<=n;i++){
      if(i==set.startnum){
        html+='<li class="active" page="'+i+'"><a>'+i+'</a></li>';
      }else{
        html+='<li page="'+i+'"><a>'+i+'</a></li>';
      }
     }
     html +='<li class="topEnd"><a aria-label="Next">尾页</a></li>';
     set.elem.html(html);
     clickpages.init();
   }else{
     clickpages.newPages("jump",set.startnum)
   }
}

上面是 pager.js部分

html部分

<script type="text/javascript" charset="utf-8" src="/template/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/template/js/pager.js"></script>
</head>
<div class="dataListPag">
  <ul class="pagination" id="page1">
  </ul>
  <div class="pageJump">
   <span>前往</span>
   <input type="text"/>
   <span>页</span>
   <button type="button" class="button">GO</button>
  </div>
</div>
<script>
Page({
  num:{$page_mum},        //页码数
  startnum:{$page},      //当前页面有列表切换,在列表切换的时候修改数字,跳转到当前页
  elem:$('#page1'),   //指定的元素
  callback:function(n){ //回调函数
   // 在这里请求当前跳转需要用到的数据
//  alert('跳转到第'+n+'页,请求此页数据,此页有列表切换');
   window.location.href='id=xigua_re:system_msg&op=private_msglist&page='+n;
  }
});
// 数据列表的循环获取
$('.userArticleType li').on('click',function () {
  $('.userArticleType li').removeClass('choose');
  $(this).addClass('choose')
})
</script>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery中DOM常见操作实例小结
Aug 01 #jQuery
jQuery中DOM操作原则实例分析
Aug 01 #jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
jquery.pager.js分页实现详解
Jul 29 #jQuery
jquery.pager.js实现分页效果
Jul 29 #jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 #jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
You might like
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
护士进修自我鉴定
2014/02/07 职场文书
总经理岗位职责
2015/02/04 职场文书
催款通知书范文
2015/04/17 职场文书
不同意离婚答辩状
2015/05/22 职场文书
在校学生证明格式
2015/06/24 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python