Question

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

Answer 1

Laravel一个页面里有多个分页并用jQuery pagination.js实现
[javascript] view plain copy
<!-- 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分页结束 -->
下面是模板：
[html] view plain copy
<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>
最后还要注意下就是，往页面里输出的结果太多的话可能会卡，因为原理就是把别的隐藏，只显示你想要的

Answer 2

laravel自带有分页