1. 程式人生 > >淺談TP5的ajax無重新整理分頁

淺談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 版權宣告:本文為博主原創文章,轉載請附上博文連結!