淺談TP5的ajax無重新整理分頁
簡單說一下如何進行TP5的ajax無重新整理分頁吧,這個功能實現的方法有千百種,或許我提供的這一種並不是最好的,但確實是很實用的。
以下的例子會使用TP5自帶的分頁類來實現,無任何修改。
首先來一段後臺查詢資料的程式碼,查詢出相關的資料
$list = Loader::model('Admin')->alias('a')->field('user_id,username,realname,seller_hotel_name,status,role_name,last_login_time')->join('est_rbac_role r','a.role_id = r.role_id','left')->join('est_seller s','a.seller_id = s.seller_id','left')->paginate(9); //渲染分頁按鈕 $page = $list->render(); //轉換為資料 $list = $list->toArray()['data']; //前臺ajax分頁,如果是ajax請求的話就會進入該區間,下面的程式碼就不會執行 if($request->isAjax()){ $data = $list; 這一段是將資料賦值給一個數組,這個陣列用於ajax請求返回給前端 $data['page'] = $page; 這個是分頁的按鈕 $data['status'] = 1; 狀態碼 return json($data); 返回json格式的資料 } $this->assign('list',$list); $this->assign('page',$page); return $this->fetch();
$list就是這次需要分頁的資料,這裡是使用了TP5的模型來查詢資料,呼叫paginate方法,引數就是每頁的條數。
然後再展示前端的程式碼
首先是分配資料還有分頁按鈕到前臺,這是使用了TP5的foreach標籤,相信大家都不陌生
<div class="box-body table-responsive no-padding"> <table class="table table-bordered table-hover dataTable"> <thead> <tr> <th>使用者名稱</th> <th>姓名</th> <th>角色</th> <th>最後一次登入時間</th> <th>所屬平臺</th> </tr> </thead> <tbody class="list"> {foreach name="list" item="vo"} <tr> <td>{$vo.username}</td> <td>{$vo.realname}</td> <td>{$vo.role_name}</td> <td>{$vo.last_login_time}</td> <td>{$vo.seller_hotel_name}</td> </tr> {/foreach} </tbody> </table> <div class="page"> {$page} </div> </div>
再列出JS的程式碼,本次的無重新整理是通過禁用a標籤的預設跳轉,將所得的資料替換之前的資料來實現的。
$('.page').delegate('a','click',function(){ var url = $(this).attr('href'); 這個url就是將要訪問的地址 $.ajax({ url:url, success:function(res){ page(res); page方法用於替換資料 } }) return false; 這裡就是阻止a標籤預設跳轉的行為 }); function page(res){ tr = ''; 準備一個容器 $('.page').html(res.page); 請求到後臺的資料,替換之前分頁按鈕 delete res.page;刪除之前返回的分頁按鈕 說一下為什麼要刪除這個吧.因為返回的json中,page也是其中的一個下標,也會進入for迴圈中,所以要提前刪掉,不然會出現undefined的情況。 delete res.status;刪除之前後臺返回的狀態碼 for(var k in res){ //這裡是拼接html標籤 tr+='<tr><td>'+res[k].username+'</td><td>'+res[k].realname+'</td><td>'+res[k].role_name+'</td><td>'+res[k].last_login_time+'</td><td>'+res[k].seller_hotel_name+'</td></tr>'; } $('.list').html(tr);//把資料覆蓋到所需要填充資料的地方 }
寫到這裡基本就已經實現了TP5的AJAX無重新整理分頁。 --------------------- 作者:change被佔用 來源:CSDN 原文:https://blog.csdn.net/qq_35765928/article/details/79877591 版權宣告:本文為博主原創文章,轉載請附上博文連結!