最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享。分页效果与时光网的差不多。

网址:http://www.mtime.com/movie/news/all/

先在aspx页面放置一个<div class="pageDivs"></div> ,这个是用来存放分页的。

然后建一个page.js文件,具体代码如下(js中用到的css类是自己设置的,这里就不给出了,具体的大家可以自己设置一下css样式):

$(document).ready(function(){
var pageCount=0;//总页数,在数据处理的函数里设定

//////////////////////右部按钮分页显示          
 function right(pageCount,limit,rlimit){
    var html="";
     if(parseInt(pageCount)-limit>=rlimit){
                     for(var i=parseInt(pageCount)-rlimit+1; i<=parseInt(pageCount); i++){
                     html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                     }
                   else{
                     for(var i=parseInt(limit)+1; i<=pageCount; i++){
                     html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                     }
    return html;
  } 
 //////////////////////////首页,尾页,上一页,下一页   
 function changeState(pageIndex,pageCount){
     var $button1=$("div.pageDivs").find("#Button1");//上一页
     var $button2=$("div.pageDivs").find("#Button2");//下一页
     var $first=$("div.pageDivs").find("#First");//首页
     var $last=$("div.pageDivs").find("#Last");//尾页
     if(parseInt(pageIndex)==1){
        $first.css("display","none");
        $button1.css("display","none");}
     else{
      $first.css("display","inline");
      $button1.css("display","inline");
      $first.attr("page",1);
      $button1.attr("page",parseInt(pageIndex)-1);}
     if(parseInt(pageIndex)==pageCount){
        $button2.css("display","none");
        $last.css("display","none");}
      else{
      $last.css("display","inline");
      $button2.css("display","inline");
      $last.attr("page",pageCount);
      $button2.attr("page",parseInt(pageIndex)+1);}
    
 }
 ////////////////////////////////span动态分页  左边显示的页码个数,右边显示的页码个数,要求limit>rlimit
 function span(pageCount,pageIndex,limit,rlimit){
     var isContinue=true;//指示是否继续执行函数
     var html="<a id='First' href='#' >|<</a><a id='Button1' href='#' ><</a>";
     var change=(parseInt(pageCount)-parseInt(rlimit))/(parseInt(limit)-2);//指示分页码可以变动的次数
     if(pageCount!=0&&pageCount!=1){
         if(pageCount<=limit){
             for(var i=1; i<=pageCount; i++){
                 html+="<a page="+i+"  leaf='leaf'>"+i+"</a>"}
              }
         else{
             if(parseInt(pageIndex)<(limit-2)){
                for(var i=1; i<=limit; i++){
                   html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                   html+="...";
                   html+=right(pageCount,limit,rlimit);
               }
             else{
                if(parseInt(pageIndex)%(limit-2)==0){
                   if(parseInt(pageIndex)/(limit-2)<=change&&parseInt(pageIndex)-1+parseInt(limit)-1<=parseInt(pageCount)-parseInt(rlimit)){
                   for(var i=parseInt(pageIndex)-1; i<parseInt(pageIndex)-1+limit; i++){
                     html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                     html+="...";
                     html+=right(pageCount,limit,rlimit);
                   }
                   else{
                     for(var i=1; i<=rlimit; i++){
                       html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                     html+="...";
                     var rest=parseInt(pageCount)-parseInt(rlimit);
                     if(rest<limit){
                       for(var i=parseInt(rlimit)+1; i<=parseInt(pageCount); i++){
                         html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                     }
                     else{
                       var start=parseInt(pageCount)-parseInt(limit)+1;
                       for(var i=start; i<=pageCount; i++){
                          html+="<a page="+i+"  leaf='leaf'>"+i+"</a>";}
                      }
                    }
                  
    
                 }
                 else{
                  html=$("div.pageDivs").html();
                  $("div.pageDivs").html(html);
                  isContinue=false;
                     }
             }
                     
         }
      }
      if(isContinue){
      html+="<a id='Button2' href='#' >></a><a id='Last' href='#' >>|</a>";
      $("div.pageDivs").html(html);}
      changeState(pageIndex,pageCount);
      $("div.pageDivs").find("a[page=" + parseInt(pageIndex) + "]:visible").removeAttr("href").removeClass("disabled").addClass("current").siblings("a[page]:visible").removeClass("current").addClass("disabled").attr("href", "#");
 }

function page(pageIndex){

/////////////这里放你具体的数据显示,使用ajax动态加载处理数据

pageCount="通过数据处理获得的页面总数";

span(pageCount,pageIndex,7,2);//对分页效果进行调用,这里设置左边显示7个页码,右边显示2个页码。

}

//////////////////////////////为页码绑定事件

$("div.pageDivs").find("a:visible").live("click",function(){
           var result=$(this).attr("page");
           if((typeof $(this).attr("leaf"))!= 'undefined'){
 $(this).removeAttr("href").removeClass("disabled").addClass("current").siblings().removeClass("current").addClass("disabled").attr("href","#");}

page(result);
           });

});

这样就行了,以上分页的算法是可以封装的,与具体的项目没关系,可以通用。

jquery动态分页的更多相关文章

  1. jQuery异步分页插件

    学校软件工程让写课程设计(其实就是自选语言做个项目),感觉都是重复的东西就没有很认真的去写内容,更加注意写一些之前没有用过的东西. 因为一直都使用TP框架来写PHP,TP又自带分页类,想到这里就想试试 ...

  2. LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...

  3. IE7中使用Jquery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...

  4. jquery动态改变div宽度和高度

    效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  5. jQuery动态增删改查表格信息,可左键/右键提示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  7. Jquery动态在td中添加checkbox

    如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...

  8. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  9. jQuery动态产生的铵钮怎样实现事件处理

    在ASP.NET MVC环境中,实现一个小功能,就是希望使用jQuery动态一个铵钮,并让用户能执行这个铵钮的click事件.为了更好的理解与对比,Insus.NET在视图中先写一个静态的,执行相似的 ...

随机推荐

  1. Android多点触摸放大缩小图片

    1.Activity package com.fit.touchimage; import android.app.Activity; import android.graphics.Bitmap; ...

  2. IDLE经常使用快捷键汇总

    IDLE(An Integrated DeveLopment Environment for Python)是Python自带的编译器,在刚開始学习的人,或写小程序,或用于验证的时候,经经常使用到!假 ...

  3. struts2 循环标签使用

    struts2 counter循环标签的使用: struts2随提供了循环控制标签<s:iterator/>,,使用起来也比较方便,但在具体的应用中,也有不方便之处,他没有像struts1 ...

  4. php 7.1安装教程

    一.下载地址 http://php.net/downloads.php#v7.1.9 IIS如果你使用的是PHP的FastCGI IIS,你应该使用非线程安全(NTS)版本的PHP. Apache请使 ...

  5. (转)C#中的Predicate<T>与Func<T, bool>

    Delegate至少0个参数,至多32个参数,可以无返回值,也可以指定返回值类型.这个是祖宗.  Func可以接受0个至16个传入参数,必须具有返回值.  Action可以接受0个至16个传入参数,无 ...

  6. mysql数据库以加索引方式提高性能

    数据库查询速率慢的情况下可以给对应的表加上对应的索引,能够有效的提高查询效率,mysql数据库添加索引的SQL入下: ALTER TABLE `table_name` ADD INDEX index_ ...

  7. novas的verdi和debussy是干什么用的(关于debussy的一些介绍)

    source code window: 提供了一个比较友好的界面,将整个设计的source code按设计的层次结构以树状排布,并且可以在代码上反标仿真结果,支持查找.寻找驱动等一些debug常用的操 ...

  8. 【Android】6.4 DatePickerDialog和TimePickerDialog

    分类:C#.Android.VS2015: 创建日期:2016-02-08 一.简介 在Android应用中,日期选择对话框和时间选择对话框是分别提供的. 日期选择对话框(DatePickerDial ...

  9. python(33)多进程和多线程的区别

    多线程可以共享全局变量,多进程不能.多线程中,所有子线程的进程号相同:多进程中,不同的子进程进程号不同. #!/usr/bin/python # -*- coding:utf-8 -*- import ...

  10. nyoj138 哈希的简单应用(查找)

    找球号(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5 描述 在某一国度里流行着一种游戏.游戏规则为:现有一堆球中,每个球上都有一个整数编号i(0<=i<=1 ...