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

本文实例讲述了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常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

(0)

相关推荐

  • jquery.pager.js分页实现详解

    本文实例为大家分享了jquery.pager.js分页实现代码,供大家参考,具体内容如下 jquery.pager.js /* * jQuery pager plugin * Version 1.0 (12/22/2008) * @requires jQuery v1.2.6 or later * * Example at: http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html * * Copyright (c) 2008-200

  • 详解MVC如何使用开源分页插件(shenniu.pager.js)

    最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只能ip访问,没有域名哈哈),其架构组成由:aspnetcore1.0.0+redis+ postgressql+TaskMainForm服务,这个项目在后期会开源出来供大家分享学习,站点地址点这里心声网:一者是目前正在做的后台管理框架一叶子,现目前刚好吧js分页插件shenniu.pager.js写

  • jquery pagination插件实现无刷新分页代码

    先把要用到的文件依次进入进来: 复制代码 代码如下: <script src="common/jquery.js" type="text/javascript"></script> <script src="common/jquery.pagination.js" type="text/javascript"></script> <link href="commo

  • jQuery中jqGrid分页实现代码

    (1)页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT

  • 用jQuery中的ajax分页实现代码

    功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请看源码: 1.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="Measur

  • 基于JQuery的Pager分页器实现代码

    实例效果图如下 使用说明 需要使用jQuery库文件和JQuery Pager库文件(目前版本1.1) 素材准备 分页器CSS样式文件,可复制如下CSS样式,可命名为Pager.css 复制代码 代码如下: #pager ul.pages { display:block; border:none; text-transform:uppercase; font-size:10px; margin:10px 0 50px; padding:0; } #pager ul.pages li { list

  • jquery向上向下取整适合分页查询

    在用ajax进行分页查询时,分页的数目要用到取整函数 <script language="javascript"> var uu=Math.floor(5.36) //向下取整 结果为5 var uu=Math.floor(5.88) //结果为5 Math.ceil(5.33) //向上取整,结果为6 Math.round(5.55) //四舍五入 结果为6 math.round(5.22) //结果为5 </script>

  • JQuery+Ajax无刷新分页的实例代码

    先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单  就四个字段 分别是News_id  News_title  News_time  News_readtimes 二.前台页面代码: 复制代码 代码如下: <head runat="server">    <title>JQuery无刷新分页</title>    <link hre

  • jquery.pager.js实现分页效果

    本文实例为大家分享了jquery.pager.js实现分页的具体代码,供大家参考,具体内容如下 1.html <link href="/stylesheets/Pager.css" rel="external nofollow" rel="stylesheet" type="text/css"/> <script src="/javascripts/web/jquery.pager.js"

  • 基于jQuery的实现简单的分页控件

    1:效果图 2:素材 3:编码 3.1思考 需要做什么? 1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件:并且获取数据加载到当前页面: 2:进行修改删除操作的时候能记住当前页: 3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码 代码如下: <!--存储数据的容器--> <div class="tableData"> </div> <!--分页控件显示--> <div cla

  • jQuery DataTables插件自定义Ajax分页实例解析

    一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不

随机推荐