ThinkPHP5 另類方法實現分頁功能

• 2019 年 12 月 30 日
• 筆記

前言

當然是自己需要這個功能啦。。。

準備

我所用的前端框架是老外用BootStrap4二開的主題，叫MaterialPro（以下簡稱MP），我會在本文末附上壓縮包。非常好用哦。

傳統的分頁是使用ul li來做，但是最大的問題就是如果沒有正好的樣式，那麼你還得費大半天時間去寫樣式，煩得很。所以我這次使用的是MP的按鈕組，美觀也好看。

實現方法

分頁實現是用的TP5自帶的paginate方法，在Model里查詢數據的時候直接使用該方法進行分頁。然後將對象返回過來就好。

注意：官方文檔寫的是使用render方法來分頁，但是在這裡我們不用這個方法，因為他在我這有各種BUG。

將數據對象返回過來之後，var_dump之後結構是這樣的(這裡只發出來跟分頁有關的數據結構)

protected 'currentPage' => int 1    protected 'lastPage' => int 1    protected 'total' => int 4    protected 'listRows' => int 10    protected 'hasMore' => boolean false    protected 'options' =>      array (size=6)        'var_page' => string 'page' (length=4)        'path' => string '/index/index/charge' (length=19)        'query' =>          array (size=0)            empty        'fragment' => string '' (length=0)        'type' => string 'bootstrap' (length=9)        'list_rows' => int 15    protected 'nextItem' => null

提示：這裡很多人會誤認為total是總頁數，其實是錯誤的，total是數據總條數。

接下來就是前端了，很easy，我直接把代碼貼上來你們讀一下就懂了

<div class="float-right">      {if $record->currentPage()>1}      <button id="pre" type="button" class="btn btn-secondary" data-page="/index/index/charge?page={$record->currentPage()-1}">上一頁</button>      {/if}      <div class="btn-group" role="group">          {for start="1" end="$record->lastPage()+1" name="page"}          <button type="button" class="pages btn {if $page==$record->currentPage()}btn-info{else /}btn-secondary{/if}" data-page="/index/index/charge?page={$page}">{$page}</button>          {/for}      </div>      {if $record->currentPage()<$record->lastPage()}      <button id="af" type="button" class="btn btn-secondary" data-page="/index/index/charge?page={$record->currentPage()+1}">下一頁</button>      {/if}  </div>  <!--這裡寫分頁代碼-->

以及js代碼

$('#pre').on('click',function () {      window.location.href = $(this).attr('data-page');  });  $('#af').on('click',function () {      window.location.href = $(this).attr('data-page');  });  $('.pages').on('click',function () {      window.location.href = $(this).attr('data-page');  });