JQuery AJAX 分頁,跳頁下一頁,上一頁【總結了一天啊乾貨】
阿新 • • 發佈:2019-01-28
網上的分頁基本有問題,自己總結下:程式碼如下
<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>