• jquery实现分页功能


    RT,不是很难,但是感觉代码一点都不简洁,就是多加点判断,直接上代码了。

    HTML部分:

     1 <div class = "container-fluid">
     2     <div class = "row">
     3         <div class = "col-xs-12 line" style="text-align:center">
     4             <nav>
     5               <ul id = "page" class="pagination" style="margin-top:3px;">
     6 
     7               </ul>
     8             </nav>
     9         </div>
    10     </div>
    11 </div>
    HTML Code

    JS部分:

     1 $("#page").on('click','.list',function(){
     2         $(this).addClass("active");
     3         $(this).siblings().removeClass("active");
     4         getStatus();
     5         if(isMore)
     6         {
     7             switch($(this).attr("id"))
     8             {
     9                 case "firstOne":
    10                     $(this).next().show();
    11                     $(this).next().next().show();
    12                     $(this).next().next().nextAll('.list').hide();
    13                     $("#disabledNext").show();
    14                     $("#disabledPerv").hide();
    15                     break;
    16                 case "lastOne":
    17                     $(this).prev().show();
    18                     $(this).prev().prev().show();
    19                     $(this).prev().prev().prevAll('.list').hide();
    20                     $("#disabledPerv").show();
    21                     $("#disabledNext").hide();
    22                     break;
    23                 default:
    24                     $(this).prev().prevAll('.list').hide();
    25                     $(this).next().nextAll('.list').hide();
    26                     $(this).prev().show();
    27                     $(this).next().show();
    28                     if($("#page .list:first").is(':visible'))
    29                     {
    30                         $("#disabledNext").show();
    31                         $("#disabledPerv").hide();
    32                     }
    33                     if($("#page .list:last").is(':visible'))
    34                     {
    35                         $("#disabledPerv").show();
    36                         $("#disabledNext").hide();
    37                     }
    38                     break;
    39             }
    40         }
    41     });
    42     //最后一页的效果
    43     $("#page").on('click','#last',function(){
    44         $("#page .list:last").show().click();
    45     });
    46     //第一页的点击效果
    47     $("#page").on('click','#first',function(){
    48         $("#page .list:first").show().click();
    49     });
    View Code
  • 相关阅读:
    Haproxy+Keepalived高可用环境部署梳理(主主和主从模式)
    使用nginx sticky实现基于cookie的负载均衡
    CENTOS 6.6初始化SHELL脚本
    Java 开源博客 Solo 1.2.0 发布
    Java 开源博客 Solo 1.2.0 发布
    Java多线程-synchronized关键字
    Maven项目pom.xml配置详解
    4.0 苹果系统安装之黑苹果(4)
    3.0 Windows和Linux双系统安装(3)
    2.0 Linux系统的安装之Fedora安装单系统(2)
  • 原文地址:https://www.cnblogs.com/baqiphp/p/5862493.html
Copyright © 2020-2023  润新知