1. 程式人生 > >JQuery AJAX 分頁,跳頁下一頁,上一頁【總結了一天啊乾貨】

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>