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 Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
vue.js表格分页示例
2016/10/18 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python实现程序的单一实例用法分析
2015/06/03 Python
python实现实时监控文件的方法
2016/08/26 Python
python+opencv实现动态物体识别
2018/01/09 Python
TensorFlow损失函数专题详解
2018/04/26 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
播音主持女孩的自我评价分享
2013/11/20 职场文书
统计系教授推荐信
2014/02/28 职场文书
甜品店创业计划书
2014/09/21 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书