Laravel一个页面里有多个分页并用jQuery pagination.js实现

  1.  <!-- JQUERY分页 -->  
  2. <script src="{{asset('lib/js/jquery.pagination.js')}}"></script> //引入该文件前别忘了引入JQUERY库  
  3.   
  4. <script>  
  5.   $(function(){  
  6.     //这是一个非常简单的demo实例,让列表元素分页显示,我们一个页面里既有老师,又有学生,分别分页,还要换行  
  7.     //回调函数的作用是显示对应分页的列表项内容  
  8.     //回调函数在用户每次点击分页链接的时候执行  
  9.     //参数page_index{int整型}表示当前的索引页  
  10.     var initPagination = function() {  
  11.         // var num_entries = $("#hiddenresult div.result").length;  
  12.         // 创建分页  
  13.           
  14.         
  15.            var num_entries = $(".teacher").length; //这个是总条数,所以把生成的teacher类的tr全统计一下  
  16.              
  17.            $("#teacher_page").pagination(num_entries, {  
  18.                 num_edge_entries: 1, //边缘页数  
  19.                 num_display_entries: 4, //主体页数  
  20.                 callback: pageselectCallback,  
  21.                 items_per_page:10, //每页显示项  
  22.                 prev_text:"上页",  
  23.                 next_text:"下页",  
  24.             });  
  25.   
  26.            var num2 = $(".student").length;  
  27.            $("#student_page").pagination(num2, {  
  28.                 num_edge_entries: 1, //边缘页数  
  29.                 num_display_entries: 4, //主体页数  
  30.                 callback: stuPageselectCallback,  
  31.                 items_per_page:10, //每页显示项  
  32.                 prev_text:"上页",  
  33.                 next_text:"下页",  
  34.             });  
  35.           
  36.           
  37.      }();  
  38.        
  39.     function pageselectCallback(page_index,jq){ //回调函数,page_index是当前页的页码,第一页是0,jq是页面那个分页的条条容器  
  40.         var num_entries = $(".teacher").length; //总条数  
  41.         var per_page = 10; //每页显示  
  42.         var max_elem = Math.min((page_index+1)*per_page,num_entries); //每页的最大值  
  43.   
  44.         // 获取加载元素  
  45.           
  46.           
  47.         $('.teacher_tr').hide(); //先把原来输出的隐藏  
  48.         $('.teacher_tr_new1').empty(); //清空第一行,我们要按照两行,每行5个输出  
  49.         $('.teacher_tr_new2').empty(); //清空第二行  
  50.   
  51.           
  52.         var i = 0;  
  53.         for(var j=page_index*per_page;j<max_elem;j++){ //每页执行这个循环,因为是回调函数,所以换一次页执行一次  
  54.             if(i>=0 && i<Math.ceil(per_page/2)){ //如果这样就输出到第一行  
  55.               $('.teacher_tr_new1').append("<td>"+$(".teacher:eq("+j+")").html()+"</td>");  
  56.                
  57.             }else if(i>=Math.ceil(per_page/2) && i<per_page){ //输出到第二行  
  58.               $('.teacher_tr_new2').append("<td>"+$(".teacher:eq("+j+")").html()+"</td>");  
  59.   
  60.             }  
  61.             i++;  
  62.             if(i == per_page){ //用I控制是将内容填充到teacher_tr_new1还是2,10是每页显示条数  
  63.               i = 0;  
  64.             }  
  65.   
  66.         }  
  67.           
  68.           
  69.         console.log();  
  70.         //JQ代表页面装载的容器pagi1,pagi2之类的  
  71.           
  72.           
  73.         return false;  
  74.     }  
  75.   
  76.     function stuPageselectCallback(page_index,jq){ //学生的分页  
  77.         var num_entries = $(".student").length;  
  78.         var per_page = 10;  
  79.         var max_elem = Math.min((page_index+1)*per_page,num_entries);  
  80.   
  81.         // 获取加载元素  
  82.           
  83.         // $(jq).prev().hide();  
  84.         // $(jq).prev().prev().empty();  
  85.         $('.student_tr').hide();  
  86.         $('.student_tr_new1').empty();  
  87.         $('.student_tr_new2').empty();  
  88.   
  89.           
  90.         var i = 0;  
  91.         for(var j=page_index*per_page;j<max_elem;j++){  
  92.             if(i>=0 && i<Math.ceil(per_page/2)){  
  93.               $('.student_tr_new1').append("<td>"+$(".student:eq("+j+")").html()+"</td>");  
  94.                
  95.             }else if(i>=Math.ceil(per_page/2) && i<per_page){  
  96.               $('.student_tr_new2').append("<td>"+$(".student:eq("+j+")").html()+"</td>");  
  97.   
  98.             }  
  99.             i++;  
  100.             if(i == per_page){   
  101.               i = 0;  
  102.             }  
  103.   
  104.         }  
  105.           
  106.           
  107.         console.log();  
  108.         //JQ代表页面装载的容器pagi1,pagi2之类的  
  109.           
  110.           
  111.         return false;  
  112.     }  
  113.   
  114. });    
  115. </script>  
  116. <!-- JQUERY分页结束 -->  


下面是模板:

  1. <table>  
  2.                         <tr class='teacher_tr'>  
  3.                           <?php $i=1?>  
  4.                            @foreach($teachers as $t)  
  5.                                   
  6.                                 <td class='teacher'>  
  7.                                     <a href="{{URL('myschoolmobileview/jiaoshi/'.$t->id)}}" target='_blank'>{{OfficeConvert($t->office_id)}}:{{$t->name}}</a>  
  8.                                     <br>  
  9.                                     <img src="{{URL($t->protrait)}}" alt="" width='180' height='250'>  
  10.                                       
  11.                                 </td>  
  12.                               <?php   
  13.                                 if($i%5==0){  
  14.                                   echo "</tr>";  
  15.                                   echo "<tr class='teacher_tr'>";  
  16.                                   }  
  17.                                 $i++;  
  18.                                      
  19.                               ?>  
  20.                             
  21.                            @endforeach  
  22.                     </table>  
  23.                 该班的老师:  
  24.                    <table class='table'>  
  25.                        <tr class='teacher_tr_new1'> //第一行  
  26.                             
  27.                        </tr>  
  28.                        <tr class='teacher_tr_new2'> //第二行  
  29.                              
  30.                        </tr>  
  31.                        <tr>  
  32.                            <td><div id='teacher_page' class='pagination'></div></td> //这里就是我所说的那个容器jq  
  33.                        </tr >  
  34.                    </table>  
  35.                   <!-- 老师结束 -->  
  36.                   <!-- 学生开始 -->  
  37.                 <table>  
  38.                   <tr class='student_tr'>  
  39.                             <?php $i=1?>  
  40.                            @foreach($students as $s)  
  41.   
  42.                                 <td class='student'>  
  43.                                     {{StudentRoleConvert($s->role_id)}}:{{$s->name}}  
  44.                                     <br>  
  45.                                     <img src="{{URL($s->header_img)}}" alt="" width='180' height='250'>  
  46.                                       
  47.                                 </td>  
  48.                                <?php   
  49.                           
  50.                                     if($i%5==0){  
  51.                                         echo "</tr >";  
  52.                                         echo "<tr class='student_tr'>";  
  53.                                     }  
  54.                                     $i++;  
  55.                                      
  56.                                  ?>  
  57.                            @endforeach  
  58.                 </table>  
  59.   
  60.                  该班的学生:  
  61.                     <table class='table'>  
  62.                          
  63.                        <tr class='student_tr_new1'>  
  64.                             
  65.                        </tr>  
  66.                        <tr class='student_tr_new2'>  
  67.                             
  68.                        </tr>  
  69.                        <tr>  
  70.                            <td><div id='student_page' class='pagination'></div></td>  
  71.                        </tr >  
  72.   
  73.                    </table>        

最后还要注意下就是,往页面里输出的结果太多的话可能会卡,因为原理就是把别的隐藏,只显示你想要的
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值