最近一直研究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. C# 获取当前打开的文件夹2

    这一个则比较投机,准确性不能保证,可以参考:   这个类获取当前进程的句柄:  public class MyProcess     {         private bool haveMainWi ...

  2. RabbitMQ与.net core(二)Producer与Exchange

    Producer:消息的生产者,也就是创建消息的对象 Exchange:消息的接受者,也就是用来接收消息的对象,Exchange接收到消息后将消息按照规则发送到与他绑定的Queue中.下面我们来定义一 ...

  3. SYS_R12 MOAC多组织底层技术实现技术分析(Oracle VPD) (案例)

    2014-05-30 Created By BaoXinjian

  4. Js 常用函数【持续更新】

    Js Math对象方法介绍:http://www.w3school.com.cn/jsref/jsref_obj_math.asp 1. 算数函数(Math) 1)Js小数取整 常用于:分页算法 js ...

  5. ie11 下 input 默认有 X 关闭按钮的问题

    &::-ms-clear, ::-ms-reveal{display: none;}

  6. gulp#4.0

    gitbook教程: https://dragon8github.gitbooks.io/gulp-webpack/content/an-zhuang-gulp-4-0.html gulpfile.j ...

  7. java与java学习路线

    JAVA学习路线图 Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Java语言作为静态面 ...

  8. cocos2d-x开发记录:二,基本概念(动作,动画,坐标系统)

    既然我们选择用cocos2d,那么他里面的一些基本概念我们肯定是要熟悉下的,以下资料来源于官网,英语好的可以直接去官网看. 一.Actions(动作) 动作都由于CCNode对象发出.这些动作通常修改 ...

  9. Wireshark分析网络慢

        tcp.analysis.retransmission tcp.flags.reset==1

  10. Test for Required Behavior, Not Incidental Behavior

    Test for Required Behavior, Not Incidental Behavior Kevlin Henney A COMMON PITFALL IN TESTING is to ...