jquery实现分页功能

Posted 2020-08-08 这名字就是霸气

RT,不是很难，但是感觉代码一点都不简洁，

 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     });

JS Code

 

就是多加点判断，直接上代码了。

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部分：