zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    java复习计划
    超过16位的字符串装16进制
    《将博客搬至CSDN》
    android设置中文字体样式
    布局文件View和ViewGroup
    创建线程的两种方法,继承Thread,继承Runnable
    本地文件的copy复制
    字节流和字符流完成URL下载,并存入本地
    文本过滤器的用法,FileFilter()和FilenameFilter()
    JavaSE笔记
  • 原文地址:https://www.cnblogs.com/baqiphp/p/5862493.html
Copyright © 2011-2022 走看看