1. 程式人生 > >laravel之ajax無重新整理分頁

laravel之ajax無重新整理分頁

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 包著的部分一樣