<!-- JQUERY分頁 -->
<script src="{{asset('lib/js/jquery.pagination.js')}}"></script> //引入該檔案前別忘了引入JQUERY庫

<script>
  $(function(){
    //這是一個非常簡單的demo例項，讓列表元素分頁顯示,我們一個頁面裡既有老師，又有學生，分別分頁，還要換行
    //回撥函式的作用是顯示對應分頁的列表項內容
    //回撥函式在使用者每次點選分頁連結的時候執行
    //引數page_index{int整型}表示當前的索引頁
    var initPagination = function() {
        // var num_entries = $("#hiddenresult div.result").length;
        // 建立分頁
        
      
           var num_entries = $(".teacher").length; //這個是總條數，所以把生成的teacher類的tr全統計一下
           
           $("#teacher_page").pagination(num_entries, {
                num_edge_entries: 1, //邊緣頁數
                num_display_entries: 4, //主體頁數
                callback: pageselectCallback,
                items_per_page:10, //每頁顯示項
                prev_text:"上頁",
                next_text:"下頁",
            });

           var num2 = $(".student").length;
           $("#student_page").pagination(num2, {
                num_edge_entries: 1, //邊緣頁數
                num_display_entries: 4, //主體頁數
                callback: stuPageselectCallback,
                items_per_page:10, //每頁顯示項
                prev_text:"上頁",
                next_text:"下頁",
            });
        
        
     }();
     
    function pageselectCallback(page_index,jq){ //回撥函式，page_index是當前頁的頁碼，第一頁是0,jq是頁面那個分頁的條條容器
        var num_entries = $(".teacher").length; //總條數
        var per_page = 10; //每頁顯示
        var max_elem = Math.min((page_index+1)*per_page,num_entries); //每頁的最大值

        // 獲取載入元素
        
        
        $('.teacher_tr').hide(); //先把原來輸出的隱藏
        $('.teacher_tr_new1').empty(); //清空第一行，我們要按照兩行，每行5個輸出
        $('.teacher_tr_new2').empty(); //清空第二行

        
        var i = 0;
        for(var j=page_index*per_page;j<max_elem;j++){ //每頁執行這個迴圈，因為是回撥函式，所以換一次頁執行一次
            if(i>=0 && i<Math.ceil(per_page/2)){ //如果這樣就輸出到第一行
              $('.teacher_tr_new1').append("<td>"+$(".teacher:eq("+j+")").html()+"</td>");
             
            }else if(i>=Math.ceil(per_page/2) && i<per_page){ //輸出到第二行
              $('.teacher_tr_new2').append("<td>"+$(".teacher:eq("+j+")").html()+"</td>");

            }
            i++;
            if(i == per_page){ //用I控制是將內容填充到teacher_tr_new1還是2，10是每頁顯示條數
              i = 0;
            }

        }
        
        
        console.log();
        //JQ代表頁面裝載的容器pagi1,pagi2之類的
        
        
        return false;
    }

    function stuPageselectCallback(page_index,jq){ //學生的分頁
        var num_entries = $(".student").length;
        var per_page = 10;
        var max_elem = Math.min((page_index+1)*per_page,num_entries);

        // 獲取載入元素
        
        // $(jq).prev().hide();
        // $(jq).prev().prev().empty();
        $('.student_tr').hide();
        $('.student_tr_new1').empty();
        $('.student_tr_new2').empty();

        
        var i = 0;
        for(var j=page_index*per_page;j<max_elem;j++){
            if(i>=0 && i<Math.ceil(per_page/2)){
              $('.student_tr_new1').append("<td>"+$(".student:eq("+j+")").html()+"</td>");
             
            }else if(i>=Math.ceil(per_page/2) && i<per_page){
              $('.student_tr_new2').append("<td>"+$(".student:eq("+j+")").html()+"</td>");

            }
            i++;
            if(i == per_page){ 
              i = 0;
            }

        }
        
        
        console.log();
        //JQ代表頁面裝載的容器pagi1,pagi2之類的
        
        
        return false;
    }

});  
</script>
<!-- JQUERY分頁結束 -->
 

下面是模板：

<table>
                        <tr class='teacher_tr'>
                          <?php $i=1; ?>
                           @foreach($teachers as $t)
                                
                                <td class='teacher'>
                                    <a href="{{URL('myschoolmobileview/jiaoshi/'.$t->id)}}" target='_blank'>{{OfficeConvert($t->office_id)}}:{{$t->name}}</a>
                                    <br>
                                    <img src="{{URL($t->protrait)}}" alt="" width='180' height='250'>
                                    
                                </td>
                              <?php 
                                if($i%5==0){
                                  echo "</tr>";
                                  echo "<tr class='teacher_tr'>";
                                  }
                                $i++;
                                   
                              ?>
                          
                           @endforeach
                    </table>
                該班的老師：
                   <table class='table'>
                       <tr class='teacher_tr_new1'> //第一行
                          
                       </tr>
                       <tr class='teacher_tr_new2'> //第二行
                           
                       </tr>
                       <tr>
                           <td><div id='teacher_page' class='pagination'></div></td> //這裡就是我所說的那個容器jq
                       </tr >
                   </table>
                  <!-- 老師結束 -->
                  <!-- 學生開始 -->
                <table>
                  <tr class='student_tr'>
                            <?php $i=1; ?>
                           @foreach($students as $s)

                                <td class='student'>
                                    {{StudentRoleConvert($s->role_id)}}:{{$s->name}}
                                    <br>
                                    <img src="{{URL($s->header_img)}}" alt="" width='180' height='250'>
                                    
                                </td>
                               <?php 
                        
                                    if($i%5==0){
                                        echo "</tr >";
                                        echo "<tr class='student_tr'>";
                                    }
                                    $i++;
                                   
                                 ?>
                           @endforeach
                </table>

                 該班的學生：
                    <table class='table'>
                       
                       <tr class='student_tr_new1'>
                          
                       </tr>
                       <tr class='student_tr_new2'>
                          
                       </tr>
                       <tr>
                           <td><div id='student_page' class='pagination'></div></td>
                       </tr >

                   </table>