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分页结束 -->  

下面是模板：

[html] view plain copy print ?

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>        

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