JQuery AJAX 分页,跳页下一页,上一页【总结了一天啊干货】

网上的分页基本有问题,自己总结下:代码如下
<script type="text/javascript">
var pagesi = "2";//每页行数
var totalPage = "0";//总页数
var currentPage = "1";//当前页 
    $(function(){
                $('.menu_item').click(function () {
                    $('.menu_item').removeClass('selected');
                    $(this).addClass('selected');
                });
                
                $('.js_top').click(function () {
                    $('.js_top').removeClass('selected');
                    $(this).addClass('selected');
                });


    			$('#commentList').click(function(){
    				queryForPages();
    			});
    			
    			 //上一页
    		    $(".page_prev").click(function(){
	    		    if(currentPage>1){
	    		    currentPage-- ;
	    		    $(".page_prev").css({display:"inline-block"});
	    		    queryForPages();
	    		    }
					if(currentPage==1){
	    		    	$(".page_prev").hide();
	    		    }
					if(currentPage<totalPage){
		    		    $(".page_next").css({display:"inline-block"});
	    		    }
    		    });
    		    //下一页
    		    $(".page_next").click(function(){
	    		    if(currentPage<totalPage){
		    		    currentPage++ ;
		    		    $(".page_next").css({display:"inline-block"});
		    		    queryForPages();
	    		    }
	    		    if(currentPage>1){
	    		   	 	$(".page_prev").css({display:"inline-block"});
	    		    }
	    		    if(currentPage==totalPage){
	    		    	$(".page_next").hide();
	    		    }
    		    }); 
    		    //跳页
    		    $('.page_go').click(function(){
    		    	currentPage = $('.goto_area').find('input').val();
    		    	queryForPages();
    		    	if(currentPage==1){
	    		    	$(".page_prev").hide();
	    		    }
    		    	 if(currentPage>1){
 	    		   	 	$(".page_prev").css({display:"inline-block"});
 	    		    }
    		    	if(currentPage<totalPage){
		    		    $(".page_next").css({display:"inline-block"});
	    		    }
    		    	if(currentPage==totalPage){
	    		    	$(".page_next").hide();
	    		    }
    		    });
    		    
            });
            
            //通过AJAX查找
    function queryForPages(){
  		 $.post("comment/getCommentNaichaByTimeType.do",
           {
               timeType:"3",
               currentPage: currentPage,
               pageSize: pagesi
           },
           function(data){  
           	var good = data.countList[0].count;
           	var middle = data.countList[1].count;
           	var bad = data.countList[2].count;
           	var total = good + middle + bad;
           	$('#good').text(good);
           	$('#middle').text(middle);
           	$('#bad').text(bad);
           	$('#total').text(total);
           	totalPage = Math.ceil(total/pagesi);//总也数
           	$('#currentPage').text(currentPage);
           	$('#totalPage').text(totalPage);
           	var childhtml = '';
           	$.each(data.commentNaichaList, function(idx, obj) {
           		var time = obj.time;
           		var rank = obj.rank;
           		var content = obj.content;
           		var beCommentName = obj.beCommentName;
           		var toCommentName = obj.toCommentName;
           		console.log(obj.content);
           		childhtml += '<tr>'
                   childhtml += '<td class="table_cell js_time">'+time+'</td>';
                   childhtml += '<td class="table_cell tr js_rank">'+rank+'</td>';
                   childhtml += '<td class="table_cell tr js_content">'+content+'</td>';
                   childhtml += '<td class="table_cell tr js_time">'+beCommentName+'</td>';
                   childhtml += '<td class="table_cell tr js_time">'+toCommentName+'</td>';
              		childhtml += '</tr>';
           	});
              		console.log(childhtml);
               $('#js_detail').html(childhtml);
           });
		 } 
    
         
</script>


  • 8
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值