<!-- 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>
最後還要注意下就是,往頁面裏輸出的結果太多的話可能會卡,因爲原理就是把別的隱藏,只顯示你想要的