一个菜鸟的互联网技术分享博客
您的位置: 主页 > 两种ajax渲染实现翻页
advertisement

两种ajax渲染实现翻页

1、低配版

效果图如下:

代码如下:

  1. $(function(){  
  2.         var question_number = 1;  
  3.         $('.product_conent_left_title h3:eq(1)').on('click',function(){  
  4.             var productId = $('.product_about').attr('product_id')  
  5.             $('.product_question').find('.product_question_content').children().remove();  
  6.             $.ajax({  
  7.                 url:'http://demo.pdk365.com/data_question/',  
  8.                 type:'get',  
  9.                 data:{  
  10.                     "page":1,  
  11.                     "product_id":productId,  
  12.                     "count":5  
  13.                 },  
  14.                 dataType:'jsonp',  
  15.                 jsonp:"callback",    
  16.                 jsonpCallback:"successCallback",  
  17.                 success:function(data){  
  18.                     $.each(data.data,function(i){  
  19.                         console.log(data.data[i])  
  20.                         $('.product_question').find('.product_question_content').append('<li><span>Q:'+ data.data[i].Q +'</span><span>A:'+ data.data[i].A +'</span></li>')  
  21.                     });  
  22.   
  23.                     if(question_number == 1){  
  24.                         for(var j=1;j<=data.total_page;j++){  
  25.                             $('.question_page').find('li:last-child').before('<li><a href="##">'+j+'</a></li>');  
  26.                             $('.question_page').find('li:eq(1)').addClass('active')  
  27.                         }  
  28.                         question_number = 0;  
  29.                     }  
  30.                       
  31.                     $('.question_page li:not(":first,:last")').on('click',function(){  
  32.                         var evaluate_page_num = $(this).find('a').html();  
  33.                         $(this).addClass('active').siblings('li:not(":first,:last")').removeClass('active');  
  34.                         getquestionPage(evaluate_page_num,productId);  
  35.                     })  
  36.   
  37.                     $('.question_page li:first').on('click',function(){  
  38.                         var prev_evaluate_page = $('.question_page li.active').text();  
  39.                         var prev_evaluate_page_minus = Number(prev_evaluate_page) - 1;  
  40.                         if( prev_evaluate_page == 1){  
  41.                             alert('已经第一页咯')  
  42.                         }else{  
  43.                             $('.question_page li.active').removeClass('active').prev('li').addClass('active');  
  44.                             getquestionPage(prev_evaluate_page_minus,productId);  
  45.                         }  
  46.                     })  
  47.                     $('.question_page li:last').on('click',function(){  
  48.                         var next_evaluate_page = $('.question_page li.active').text();  
  49.                         var next_evaluate_page_plus = Number(next_evaluate_page) + 1;  
  50.                         if( next_evaluate_page == data.total_page){  
  51.                             alert('已经最后一页咯')  
  52.                         }else{  
  53.                             $('.question_page li.active').removeClass('active').next('li').addClass('active');  
  54.                             getquestionPage(next_evaluate_page_plus,productId);  
  55.                         }  
  56.                     })  
  57.   
  58.                 },  
  59.                 error:function(){  
  60.                     console.log('error');  
  61.                 }  
  62.             })  
  63.             function getquestionPage(pagenumber,productId){  
  64.                 $.ajax({  
  65.                     url:'http://demo.pdk365.com/data_question/',  
  66.                     type:'get',  
  67.                     data:{  
  68.                         "page":pagenumber,   //当前页  
  69.                         "product_id":productId,  
  70.                         "count":5  
  71.                     },  
  72.                     dataType:'jsonp',  
  73.                     jsonp:"callback",    
  74.                     jsonpCallback:'successCallback',  
  75.                     success:function(data){  
  76.                         $('.product_question').find('.product_question_content').children().remove();  
  77.                         $.each(data.data,function(i){  
  78.                             $('.product_question').find('.product_question_content').append('<li><span>Q:'+ data.data[i].Q +'</span><span>A:'+ data.data[i].A +'</span></li>')  
  79.                         })  
  80.                     },  
  81.                     error:function(){  
  82.                         console.log('error');  
  83.                     }  
  84.   
  85.                 })  
  86.             }   
  87.         })  
  88.           
  89.     });  

该翻页的缺点就是当页数过多是就会出现bug

2、高配版

效果图如下:



代码如下:

  1. $(function () {  
  2.     var xdjl_number = 1;  
  3.     var item = "";  
  4.     $('.order_advisory').click(function () {  
  5.         //获取顾问id  
  6.         var id = window.location.href.split('/').reverse()[1];  
  7.         $.ajax({  
  8.             url:'/api/consultant_data/',  
  9.             type:'get',  
  10.             data:{  
  11.                 id:id,  
  12.                 choose:2,           //0:顾问的案例数据,1:顾问的订单数据,2:顾问的询单数据  
  13.                 page:1              //默认第一页,显示个数由后端接口里面控制  
  14.             },  
  15.             success:function (data) {  
  16.                 for( i in data.data.data.data){  
  17.                     if (!data.data.data.data[i].title){  
  18.                         data.data.data.data[i].title = "未定义服务名"  
  19.                     }  
  20.                     $('.adviser_conent_order_advisory table').find('tbody').append('<tr><td class="adviser_td1"><div>'+data.data.data.data[i].title+'</div></td><td>'+data.data.data.data[i].linkman+'</td><td>'+data.data.data.data[i].tel+'</td><td>'+data.data.data.data[i].time+'</td></tr>')  
  21.   
  22.                     if( xdjl_number == 1){  
  23.                         xdjl_number = 0;  
  24.                         if (data.data.num_pages <= 5 ) {//总页数小于五页,则加载所有页  
  25.                             for (i=1; i <= data.data.num_pages; i++) {  
  26.                                 if (i ==  data.data.current_page) {  
  27.                                     item += '<li class="active"><a href="##">'+ i +'</a></li>';  
  28.                                 }else{  
  29.                                     item += '<li><a href="##">'+ i +'</a></li>';  
  30.                                 }  
  31.                             };  
  32.                             $('.advisory_page').find('li:last-child').before(item);  
  33.                         }else if (data.data.num_pages > 5) {//总页数大于五页,则加载五页  
  34.                             if (data.data.current_page < 5) {//当前页小于5,加载1-5页  
  35.                                 for (i=1; i <= 5; i++) {  
  36.                                     if (i == data.data.current_page) {  
  37.                                         item += '<li class="active"><a href="##">'+ i +'</a></li>';  
  38.                                     }else{  
  39.                                         item += '<li><a href="##">'+ i +'</a></li>';  
  40.                                     }  
  41.                                 };  
  42.                                 if (data.data.current_page <= data.data.num_pages - 2) {//最后一页追加“...”代表省略的页  
  43.                                     item += "<li style='cursor: no-drop;'><a href='##' style='pointer-events: none;'> . . . </a></li>";  
  44.                                 }  
  45.                                 $('.advisory_page').find('li:last-child').before(item);  
  46.                             }else if (data.data.current_page >= 5) {//当前页大于5页  
  47.                                 for (i=1; i <= 2; i++) {//1,2页码始终显示  
  48.                                     item +=  '<li><a href="##">'+ i +'</a></li>';  
  49.                                 }  
  50.                                 item += "<li style='cursor: no-drop;'><a href='##'> . . . </a></li>";//2页码后面用...代替部分未显示的页码  
  51.                                 if (data.data.current_page + 1 == data.data.num_pages) {//当前页+1等于总页码  
  52.                                     for(i = data.data.current_page-1; i <= data.data.num_pages; i++){//“...”后面跟三个页码当前页居中显示  
  53.                                         if (i == data.data.current_page) {  
  54.                                             item += '<li class="active"><a href="##">'+ i +'</a></li>';  
  55.                                         }else{  
  56.                                             item += '<li><a href="##">'+ i +'</a></li>';  
  57.                                         }  
  58.                                     }  
  59.                                 }else if (data.data.current_page ==data.data.num_pages) {//当前页数等于总页数则是最后一页页码显示在最后  
  60.                                     for(i = data.data.current_page - 2; i <=data.data.num_pages; i++){//...后面跟三个页码当前页居中显示  
  61.                                         if (i == data.data.current_page) {  
  62.                                             item += '<li class="active"><a href="##">'+ i +'</a></li>';  
  63.                                         }else{  
  64.                                             item += '<li><a href="##">'+ i +'</a></li>';  
  65.                                         }  
  66.                                     }  
  67.                                 }else{//当前页小于总页数,则最后一页后面跟...  
  68.                                     for(i = data.data.current_page-1; i <= data.data.current_page+1; i++){//dqPage+1页后面...  
  69.                                         if (i == data.data.current_page) {  
  70.                                             item += '<li class="active"><a href="##">'+ i +'</a></li>';  
  71.                                         }else{  
  72.                                             item += '<li><a href="##">'+ i +'</a></li>';  
  73.                                         }  
  74.                                     }  
  75.                                     item += "<li style='cursor: no-drop;'><a href='##' style='pointer-events: none;'> . . . </a></li>";  
  76.                                 }  
  77.                                 $('.advisory_page').find('li:last-child').before(item);  
  78.                             }  
  79.                         }  
  80.                     }  
  81.                 }  
  82.                 $('.advisory_page li:not(":first,:last")').on('click',function(){  
  83.                      var evaluate_page_num = $(this).find('a').html();  
  84.                      $(this).addClass('active').siblings('li:not(":first,:last")').removeClass('active');  
  85.                      xdjl_number=1;  
  86.                      $('.advisory_page li:not(":first,:last")').remove();  
  87.                      item="";  
  88.                      getxdjlPage(evaluate_page_num);  
  89.                 });  
  90.                 $('.advisory_page li:first').on('click',function(){  
  91.                      var prev_evaluate_page = $('.advisory_page li.active').text();  
  92.                      var prev_evaluate_page_minus = Number(prev_evaluate_page) - 1;  
  93.                      xdjl_number=1;  
  94.                      if( prev_evaluate_page == 1){  
  95.                          alert('已经第一页咯')  
  96.                      }else{  
  97.                          $('.advisory_page li.active').removeClass('active').prev('li').addClass('active');  
  98.                          getxdjlPage(prev_evaluate_page_minus);  
  99.                      }  
  100.                 });  
  101.                 $('.advisory_page li:last').on('click',function(){  
  102.                      var next_evaluate_page = $('.advisory_page li.active').text();  
  103.                      var next_evaluate_page_plus = Number(next_evaluate_page) + 1;  
  104.                      xdjl_number=1;  
  105.                      if( next_evaluate_page ==data.data.num_pages){  
  106.                          alert('已经最后一页咯')  
  107.                      }else{  
  108.                          $('.advisory_page li.active').removeClass('active').next('li').addClass('active');  
  109.                          getxdjlPage(next_evaluate_page_plus);  
  110.                      }  
  111.                  })  
  112.             },  
  113.             error:function () {  
  114.                 console.log("error")  
  115.             }  
  116.         })  
  117.   
  118.         function getxdjlPage(pagenumber) {  
  119.             $.ajax({  
  120.                 url:'/api/consultant_data/',  
  121.                 type:'get',  
  122.                 data:{  
  123.                     id:id,  
  124.                     choose:2,           //0:顾问的案例数据,1:顾问的订单数据,2:顾问的询单数据  
  125.                     page:pagenumber,    //点击翻页数字跳转到数字页  
  126.                     count:6           //页面里面显示个数  
  127.                 },  
  128.                 success:function (data) {  
  129.                     console.log(data)  
  130.                     $('.adviser_conent_order_advisory table').find('tbody').empty()  
  131.                     for( i in data.data.data.data) {  
  132.                         $('.adviser_conent_order_advisory table').find('tbody').append('<tr><td class="adviser_td1"><div>' + data.data.data.data[i].title + '</div></td><td>' + data.data.data.data[i].linkman + '</td><td>' + data.data.data.data[i].tel + '</td><td>' + data.data.data.data[i].time + '</td></tr>')  
  133.   
  134.                         if( xdjl_number == 1){  
  135.                             xdjl_number = 0;  
  136.                             if (data.data.num_pages <= 5 ) {//总页数小于五页,则加载所有页  
  137.                                 item="";  
  138.                                 for (i=1; i <= data.data.num_pages; i++) {  
  139.                                     if (i ==  data.data.current_page) {  
  140.                                         item += '<li class="active"><a href="##">'+ i +'</a></li>';  
  141.                                     }else{  
  142.                                         item += '<li><a href="##">'+ i +'</a></li>';  
  143.                                     }  
  144.                                 };  
  145.                                 $('.advisory_page li:not(":first,:last")').remove();  
  146.                                 $('.advisory_page').find('li:last-child').before(item);  
  147.                             }else if (data.data.num_pages > 5) {//总页数大于五页,则加载五页  
  148.                                 item="";  
  149.                                 if (data.data.current_page < 5) {//当前页小于5,加载1-5页  
  150.                                     for (i=1; i <= 5; i++) {  
  151.                                         if (i == data.data.current_page) {  
  152.                                             item += '<li class="active"><a href="##">'+ i +'</a></li>';  
  153.                                         }else{  
  154.                                             item += '<li><a href="##">'+ i +'</a></li>';  
  155.                                         }  
  156.                                     };  
  157.                                     if (data.data.current_page <= data.data.num_pages - 2) {//最后一页追加“...”代表省略的页  
  158.                                         item += "<li style='cursor: no-drop;'><a href='##' style='pointer-events: none;'> . . . </a></li>";  
  159.                                     }  
  160.                                     $('.advisory_page li:not(":first,:last")').remove();  
  161.                                     $('.advisory_page').find('li:last-child').before(item);  
  162.                                 }else if (data.data.current_page >= 5) {//当前页大于5页  
  163.                                     for (i=1; i <= 2; i++) {//1,2页码始终显示  
  164.                                         item +=  '<li><a href="##">'+ i +'</a></li>';  
  165.                                     }  
  166.                                     item += "<li style='cursor: no-drop;'><a href='##'> . . . </a></li>";//2页码后面用...代替部分未显示的页码  
  167.                                     if (data.data.current_page + 1 == data.data.num_pages) {//当前页+1等于总页码  
  168.                                         for(i = data.data.current_page-1; i <= data.data.num_pages; i++){//“...”后面跟三个页码当前页居中显示  
  169.                                             if (i == data.data.current_page) {  
  170.                                                 item += '<li class="active"><a href="##">'+ i +'</a></li>';  
  171.                                             }else{  
  172.                                                 item += '<li><a href="##">'+ i +'</a></li>';  
  173.                                             }  
  174.                                         }  
  175.                                     }else if (data.data.current_page ==data.data.num_pages) {//当前页数等于总页数则是最后一页页码显示在最后  
  176.                                         for(i = data.data.current_page - 2; i <=data.data.num_pages; i++){//...后面跟三个页码当前页居中显示  
  177.                                             if (i == data.data.current_page) {  
  178.                                                 item += '<li class="active"><a href="##" >'+ i +'</a></li>';  
  179.                                             }else{  
  180.                                                 item += '<li><a href="##">'+ i +'</a></li>';  
  181.                                             }  
  182.                                         }  
  183.                                     }else{//当前页小于总页数,则最后一页后面跟...  
  184.                                         for(i = data.data.current_page-1; i <= data.data.current_page+1; i++){//dqPage+1页后面...  
  185.                                             if (i == data.data.current_page) {  
  186.                                                 item += '<li class="active"><a href="##">'+ i +'</a></li>';  
  187.                                             }else{  
  188.                                                 item += '<li><a href="##">'+ i +'</a></li>';  
  189.                                             }  
  190.                                         }  
  191.                                         item += "<li style='cursor: no-drop;'><a href='##' style='pointer-events: none;'> . . . </a></li>";  
  192.                                     }  
  193.                                     $('.advisory_page li:not(":first,:last")').remove();  
  194.                                     $('.advisory_page').find('li:last-child').before(item);  
  195.                                 }  
  196.                             }  
  197.                             $('.advisory_page li:not(":first,:last")').on('click',function(){  
  198.                                  var evaluate_page_num = $(this).find('a').html();  
  199.                                  $(this).addClass('active').siblings('li:not(":first,:last")').removeClass('active');  
  200.                                  xdjl_number=1;  
  201.                                  return getxdjlPage(evaluate_page_num);  
  202.                             });  
  203.                         }  
  204.                     }  
  205.                 },  
  206.                 error:function () {  
  207.                     console.log("error")  
  208.                 }  
  209.             })  
  210.         }  
  211.     })  
  212. })  

注意点:
1、第一个ajax下的翻页点击事件要放置遍历数据外面,封装的ajax下的翻页点击事件要放置遍历数据里面
2、第一个ajax不需要把设置为item = ' ',封装的ajax下需要,因为每点击一次需要把之前的翻页数字给清空
3、第一个ajax的if()判断里面不需要加$('.advisory_page li:not(":first,:last")').remove(),封装ajax下的则需要加,因为要清空之前留下来的翻页并且重新渲染出新的翻页
4、第一个ajax不需要清空数据,即加:$('.adviser_conent_order_advisory table').find('tbody').empty() ,封装的函数里面需要在遍历数据前清空之前的数据
5、因为在本地调试接口,所以不存在跨域问题,如果存在跨域问题,解决链接
zhangren.online
上一篇:Js/Jquery获取网页屏幕可见区域高度
下一篇:解决ajax跨域问题

您可能喜欢

​如何将自己写的代码上传到github上

​如何将自己写的代码上传到github上

​web前端开发之手机端开发

​web前端开发之手机端开发

​两种ajax渲染实现翻页

​两种ajax渲染实现翻页

​jQuery点击小图展示大图

​jQuery点击小图展示大图

​CSS气泡对话框

​CSS气泡对话框

回到顶部