laravel之ajax無重新整理分頁
阿新 • • 發佈:2019-02-12
ajax無重新整理分頁的優點:
1、區域性重新整理 減輕壓力
2、美觀 提高使用者體驗
php程式碼:
/*
@Laravel框架
@Ajax無重新整理分頁(簡單7步驟)
*/
public function page()
{
//1、查詢資料庫總條數
$count = count(Db::table('email')->get());
//2、設定每頁顯示條數
$rev = '4';
//3、求總頁數
$sums = ceil($count/$rev);
//4、求單前頁
$page = Input::get('page');
if(empty($page)){
$page = "1";
}
//5、設定上一頁、下一頁
$prev = ($page-1)>0?$page-1:1;
$next = ($page+1)<$sums?$page+1:$sums;
//6、求偏移量
$offset = ($page-1)*$rev;
//7、sql查詢資料庫
$data = Db::select("select * from email limit $offset,$rev");
//8、數字分頁(可有可無)
$pp = array();
for($i=1;$i<=$sums;$i++){
$pp[$i]=$i;
}
return view('page.page',['data'=>$data,'prev'=>$prev,'next'=>$next,'sums'=>$sums,'pp'=>$pp,'page'=>$page] );
}
/*
@需要替換的部分頁面
*/
public function page_pro(){
……前面的一樣……
return view('page.page_pro', ['data'=>$data,'prev'=>$prev,'next'=>$next,'sums'=>$sums,'pp'=>$pp,'page'=>$page]);}
}
page.blade.php頁面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="Js/jquery.min.js"></script>
</head>
<body>
<div id="box">
<!-- 第一部分 -->
<a href="javascript:void(0)" onclick="page(1)">首頁</a>
<a href="javascript:void(0)" onclick="page(<?php echo $prev ?>)">上一頁</a>
<a href="javascript:void(0)" onclick="page(<?php echo $next ?>)">下一頁</a>
<a href="javascript:void(0)" onclick="page(<?php echo $sums ?>)">尾頁</a><br />
<!-- 第二部分 -->
@foreach($pp as $key=>$val)
@if($val == $page)
{{$val}}
@else
<a href="javascript:void(0)" onclick="page({{$val}})">{{$val}}</a>
@endif
@endforeach
<!-- 表 -->
<table border="1" id="">
<tr>
<td>序號</td>
<td>名稱</td>
<td>時間</td>
</tr>
@foreach($data as $val)
<tr>
<td>{{$val->email_id}}</td>
<td>{{$val->email_name}}</td>
<td>{{$val->email_time}}</td>
</tr>
@endforeach
</table>
</div>
</body>
</html>
<script>
/*
@分頁
*/
function page(page){
$.ajax({
type:"get",
url:"page_pro",
data:{
page:page
},
success:function(msg){
if(msg){
$("#box").html(msg)
}
}
})
}
</script>
page_pro.blade.php頁面:
與“page.blade.php”中 div 包著的部分一樣