首页 > 代码库 > jquery实现分页功能
jquery实现分页功能
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 });
就是多加点判断，直接上代码了。
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>
JS部分：
jquery实现分页功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。