前言：

說明下我們本篇文章都要講哪些內容

分頁的使用，一步一步的教你怎麼做

分頁類LinkPager和Pagination都可以自定義哪些屬性

分頁類LinkPager如何擴充套件成我們所需要的

上下頁按鈕以及10個按鈕

1. 首先，我們把上下頁的按鈕修改成中文

<?= LinkPager::widget([ 
    'pagination' => $pages, 
    'nextPageLabel' => '下一頁', 
    'prevPageLabel' => '上一頁', 
]); ?>

1. 如果你不想要顯示上下頁，可以將prevPageLabel和nextPageLabel設定為false

<?= LinkPager::widget([ 
    'pagination' => $pages, 
    'nextPageLabel' => false, 
    'prevPageLabel' => false, 
]); ?>

1. 預設不顯示首頁也尾頁，如果你需要，可以這樣設定

<?= LinkPager::widget([ 
    'pagination' => $pages, 
    'firstPageLabel' => '首頁', 
    'lastPageLabel' => '尾頁', 
]); ?>
 

1. 如果你的資料過少，不夠2頁，預設不顯示分頁，如果你需要，設定hideOnSinglePage=false即可

<?= LinkPager::widget([ 
    'pagination' => $pages, 
    'hideOnSinglePage' => false, 
]); ?>

1. 預設顯示的頁碼為10頁，可以設定maxButtonCount為你想要展示的頁數

<?= LinkPager::widget([ 
    'pagination' => $pages, 
    'maxButtonCount' => 5
 
, 
]); ?>

1. 有些人不喜歡預設的樣式，想要分頁帶上自己的樣式，可以設定options，不要忘了自行實現pre,next,disabled等樣式

<?= LinkPager::widget([ 
    'pagination' => $pages, 
    'options' => ['class' => 'm-pagination'], 
]); ?>

第一步，我們來看看yii2自帶的分頁類該如何去使用？

1、controller action

?

1 2 3 4 5 6 7 8 9 10 11

use yii\data\Pagination; $query = Article::find()->where(['status'=> 1]); $countQuery = clone $query; $pages =new Pagination(['totalCount'=> $countQuery->count()]); $models = $query->offset($pages->offset) ->limit($pages->limit) ->all(); return$this->render('index', [ 'models'=> $models, 'pages'=> $pages, ]);

2、View

?

1 2 3 4 5 6 7 8 9

use yii\widgets\LinkPager; //迴圈展示資料 foreach ($models as $model) { // ...... } //顯示分頁頁碼 echo LinkPager::widget([ 'pagination'=> $pages, ])

程式碼基本上可以完全拷貝，修改部分資料即可，相信大多數人都是看得懂的。

我們接下來看第二步，自帶的分頁類都可以定義哪些屬性

首先我們說說LinkPager元件

.pagination引數必填，這個是我們Pagination類的例項

預設分頁類是下面這個樣子的

 

.上下頁按鈕以及10個按鈕

首先，我們把上下頁的按鈕修改成中文

?

1 2 3 4 5

<?= LinkPager::widget([ 'pagination'=> $pages, 'nextPageLabel'=> '下一頁', 'prevPageLabel'=> '上一頁', ]); ?>

如果你不想要顯示上下頁，可以將prevPageLabel和nextPageLabel設定為false

?

1 2 3 4 5

<?= LinkPager::widget([ 'pagination'=> $pages, 'nextPageLabel'=> false, 'prevPageLabel'=> false, ]); ?>

預設不顯示首頁也尾頁，如果你需要，可以這樣設定

?

1 2 3 4 5

<?= LinkPager::widget([ 'pagination'=> $pages, 'firstPageLabel'=> '首頁', 'lastPageLabel'=> '尾頁', ]); ?>

如果你的資料過少，不夠2頁，預設不顯示分頁，如果你需要，設定hideOnSinglePage=false即可

?

1 2 3 4

<?= LinkPager::widget([ 'pagination'=> $pages, 'hideOnSinglePage'=> false, ]); ?>

預設顯示的頁碼為10頁，可以設定maxButtonCount為你想要展示的頁數

?

1 2 3 4

<?= LinkPager::widget([ 'pagination'=> $pages, 'maxButtonCount'=> 5, ]); ?>

有些人不喜歡預設的樣式，想要分頁帶上自己的樣式，可以設定options，不要忘了自行實現pre,next,disabled等樣式

?

1 2 3 4

<?= LinkPager::widget([ 'pagination'=> $pages, 'options'=> ['class' => 'm-pagination'], ]); ?>

接下來我們談談Pagination元件

預設的分頁路由是下面這樣子的，我們看看能做點什麼

/controller/action?page=2&per-page=20

首先，我們是必須要指定總條數totalCount的，沒這個引數，分頁也是沒辦法實現的

?

1 2 3

$pages= new Pagination([ 'totalCount'=> $totalCount, ]);

預設分頁的數量是20，你可以設定pageSize為你想要的

?

1 2 3 4

$pages= new Pagination([ 'totalCount'=> $totalCount, 'pageSize'=> 5, ]);

從上面的分頁路由我們可以看到，預設帶的有每頁的數量per-page 如果你不想顯示該引數，設定pageSizeParam=false就好

?

1 2 3 4

$pages= new Pagination([ 'totalCount'=> $totalCount, 'pageSizeParam'=> false, ]);

我們也可以看到，預設的頁面取決於引數page,如果你想改變該引數為p,設定pageParam=p就好

?

1 2 3 4

$pages= new Pagination([ 'totalCount'=> $totalCount, 'pageParam'=> 'p', ]);

如果你的分頁存在於首頁，相信你肯定想要/?p=1而不是/site/index?p=1，我們看看怎麼隱藏掉路由

?

1 2 3 4

$pages= new Pagination([ 'totalCount'=> $totalCount, 'route'=> false, ]);

可能你會發現分頁類Pagination有一個bug,假如我們只有1頁的資料，但是手動更改位址列的page=20的時候，也會顯示page=1的資料？當然，這在大部分介面API中就很讓人厭煩。但是，這並非bug,而是一種友好的驗證。設定validatePage=false即可避免掉該問題

?

1 2 3

$pages= new Pagination([ 'totalCount'=> $totalCount, 'validatePage'=> false, ]);

最後，我們整點新花樣，擴充套件下他這個自帶的分頁！別一看見擴充套件倆字下面的就直接不看了，只有自己學會擴充套件了，以後才能越來越強！怎麼個擴充套件法呢？我們把分頁元件改為上下頁那種，具體參考下圖做個對比吧

接下來我們就來看看右側的效果具體是如何通過擴充套件LinkPager元件實現的。原始碼分享給大家，喜歡的拿去自己研究即可。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<?php namespacefrontend\components; useyii\widgets\LinkPager; useyii\helpers\Html; classMLinkPager extendsLinkPager { public$prevPageLabel = '<i class="fa fa-angle-left"></i>'; public$nextPageLabel = '<i class="fa fa-angle-right"></i>'; public$currentCountPageLabel = '第 {currentPage} 頁 / 共 {countPage} 頁'; public$currentCountPageClass = 'page-number'; public$hideOnSinglePage = false; publicfunction init () { parent::init(); } publicfunction run () { $pageCount= $this->pagination->getPageCount(); if($pageCount < 2 && $this->hideOnSinglePage) { return''; } $buttons= []; $currentPage= $this->pagination->getPage(); // prev page if($this->prevPageLabel !== false) { if(($page = $currentPage - 1) < 0) { $page= 0; } $buttons[] =$this->renderPageButton($this->prevPageLabel,$page, $this->prevPageCssClass,$currentPage <= 0, false); } // current page / count page if($this->currentCountPageLabel !== false &&$pageCount) { $currentCountPageLabel= str_replace(['{currentPage}','{countPage}'], [$currentPage+1,$pageCount], $this->currentCountPageLabel); $buttons[] = Html::tag('span',$currentCountPageLabel,array('class'=> $this->currentCountPageClass)); } // next page if($this->nextPageLabel !== false) { if(($page = $currentPage + 1) >=$pageCount - 1) { $page= $pageCount - 1; } $buttons[] =$this->renderPageButton($this->nextPageLabel,$page, $this->nextPageCssClass,$currentPage >= $pageCount - 1, false); } returnHtml::tag('nav', implode("\n",$buttons), $this->options); } protectedfunction renderPageButton($label,$page, $class,$disabled, $active) { $options= ['class' => empty($class) ?$this->pageCssClass :$class]; if($active) { Html::addCssClass($options,$this->activePageCssClass); } if($disabled) { returnfalse; } $linkOptions= $this->linkOptions; $linkOptions+= $options; $linkOptions['data-page'] =$page; returnHtml::a($label,$this->pagination->createUrl($page),$linkOptions); } }

如此一來，我們呼叫MLinkPager實現分頁效果像下面這樣即可

?

1 2 3 4

usefrontend\components\MLinkPager; <?= MLinkPager::widget([ 'pagination'=> $pages, ]); ?>

二、自定義屬性設定樣式。
首先我們說說LinkPager元件
pagination引數必填，這個是我們Pagination類的例項，返回的$pages.
預設的分頁樣式

預設頁數按鈕顯示10個。

首先，我們把上下頁的按鈕修改成中文

<?= LinkPager::widget([ 

  'pagination' => $pages, 
  'nextPageLabel' => '下一頁', 
  'prevPageLabel' => '上一頁', 
]); ?>
如果你不想要顯示上下頁，可以將prevPageLabel和nextPageLabel設定為false

<?= LinkPager::widget([ 
  'pagination' => $pages, 
  'nextPageLabel' => false, 
  'prevPageLabel' => false, 
]); 

?>

預設不顯示首頁也尾頁，如果你需要，可以這樣設定
<?= LinkPager::widget([ 
  'pagination' => $pages, 
  'firstPageLabel' => '首頁', 
  'lastPageLabel' => '尾頁', 
]); 

?>

如果你的資料過少，不夠2頁，預設不顯示分頁，如果你需要，設定hideOnSinglePage=false即可
<?= LinkPager::widget([ 
  'pagination' => $pages, 
  'hideOnSinglePage' => false, 
]); 
?>

預設顯示的頁碼為10頁，可以設定maxButtonCount為你想要展示的頁數

<?= LinkPager::widget([ 

  'pagination' => $pages, 
  'maxButtonCount' => 5, 
]); 
?>

有些人不喜歡預設的樣式，想要分頁帶上自己的樣式，可以設定options，不要忘了自行實現pre,next,disabled等樣式

<?= LinkPager::widget([ 

  'pagination' => $pages, 
  'options' => ['class' => 'm-pagination'], 
]); 
?>

接下來我們談談Pagination元件
預設的分頁路由是下面這樣子的，我們看看能做點什麼
/controller/action?page=2&per-page=20

首先，我們是必須要指定總條數totalCount的，沒這個引數，分頁也是沒辦法實現的
$pages = new Pagination([ 
  'totalCount' => $totalCount, 

]);

預設分頁的數量是20，你可以設定pageSize為你想要的
$pages = new Pagination([ 
  'totalCount' => $totalCount, 
  'pageSize' => 5, 
]);

從上面的分頁路由我們可以看到，預設帶的有每頁的數量per-page 如果你不想顯示該引數，設定pageSizeParam=false就好
$pages = new Pagination([ 
  'totalCount' => $totalCount, 
  'pageSizeParam' => false, 

]);

我們也可以看到，預設的頁面取決於引數page,如果你想改變該引數為p,設定pageParam=p就好
$pages = new Pagination([ 
  'totalCount' => $totalCount, 
  'pageParam' => 'p', 

]);

如果你的分頁存在於首頁，相信你肯定想要/?p=1而不是/site/index?p=1，我們看看怎麼隱藏掉路由
$pages = new Pagination([ 
  'totalCount' => $totalCount, 
  'route' => false, 
]);

可能你會發現分頁類Pagination有一個bug,假如我們只有1頁的資料，但是手動更改位址列的page=20的時候，也會顯示page=1的資料？當然，這在大部分介面API中就很讓人厭煩。但是，這並非bug,而是一種友好的驗證。設定validatePage=false即可避免掉該問題
$pages = new Pagination([ 
  'totalCount' => $totalCount, 
  'validatePage' => false, 
]);

接下來我們研究一下如何擴充套件自己分分頁樣式,變成如下樣式


主要是重寫run()和renderPageButtons()兩個方法
程式碼如下：
[php] view plain copy  print?

1. 相關推薦

   Yii2分頁的使用及其擴充套件方法詳解

   前言： 說明下我們本篇文章都要講哪些內容 分頁的使用，一步一步的教你怎麼做 分頁類LinkPager和Pagination都可以自定義哪些屬性 分頁類LinkPager如何擴充套件成我們所需要的 上下頁按鈕以及10個按鈕 首先，我們把上下頁的按鈕修改成中文 <

   php+Mysql分頁 類和引用詳解

   echo padding 數字 進行 else if sub var min func 一下內容為專用於分頁的類以及具體的方法和解析。<?php class Page { private $total;

   時間複雜度和空間複雜度及其計算方法詳解

   在電腦科學中，演算法的時間複雜度是一個函式，它定量地描述了一個演算法的執行時間。時間複雜度常用一個大 O 符號（不是零）來表示，不包括這個函式的低階項和首項係數。 時間複雜度是漸近的，考慮的是這個值趨於無窮時的情況。比如一個演算法的執行時間為 3n2+2n+3，這裡我們用大 O 符號來表示時，不考慮低階項，

   PTAL1-020 帥到沒朋友（20 分）及其IO效率詳解

   當芸芸眾生忙著在朋友圈中發照片的時候，總有一些人因為太帥而沒有朋友。本題就要求你找出那些帥到沒有朋友的人。輸入格式：輸入第一行給出一個正整數N（<=100），是已知朋友圈的個數；隨後N行，每行首先給出一個正整數K（<=1000），為朋友圈中的人數，然後列出一個朋友

   分頁物件Query類詳解

   本篇介紹Query類，Query是一個查詢引數類，封裝了查詢條件，分頁，排序等功能。 引數介紹 Query裡面封裝了一系列查詢引數，主要分為以下幾類： 分頁引數：設定分頁 排序引數：設定排序欄位 條件引數：設定查詢條件 欄位引數：可返回指定欄位 下面逐個講解每個引數的用法。 分頁引數 一

   C#的擴充套件方法詳解

   擴充套件方法被定義為靜態方法，但它們是通過例項方法語法進行呼叫的。 它們的第一個引數指定該方法作用於哪個型別，並且該引數以 this 修飾符為字首。 擴充套件方法當然不能破壞面向物件封裝的概念，所以只能是訪問所擴充套件類的public成員。 擴充套件方法使您能夠向現有型別“新

   Linux分頁機制之分頁機制的實現詳解--Linux記憶體管理(八)

   [注意] 如果您當前使用的系統並不是linux，或者您的系統中只有一份linux原始碼，而您又期待能夠檢視或者檢索不同版本的linux原始碼 LXR (Linux Cross Reference)是比較流行的linux

   分區工具parted的詳解及常用分區使用方法【轉】

   ima nbsp 磁盤 很好 main adding ext3 當前 padding 來源：http://blog.51cto.com/zhangmingqian/1068779 分區工具parted的詳解及常用分區使用方法 一、 parted的用途

   O(n*logn)級別的演算法之二（快速排序）的三種實現方法詳解及其與歸併排序的對比

   快速排序被稱為二十世紀演算法界的一大傑作 一，單路快排 1.測試用例： #ifndef INC_06_QUICK_SORT_DEAL_WITH_NEARLY_ORDERED_ARRAY_SORTTESTHELPER_H #define INC_06_QUICK_

   Spark中的分區方法詳解

   case turn ram key one bound p s ext 查找算法 轉自：https://blog.csdn.net/dmy1115143060/article/details/82620715 一、Spark數據分區方式簡要

   MvcPager分頁基本使用方法和擴充套件方法

   一.MvcPager文件地址 MvcPager文件 二.基本使用方法 1.nuget獲取（或者直接在官網下載dll）

   $.ajax()方法詳解

   例如 lencod ace 包含 等等 json 返回 用戶名 代碼 jquery中的ajax方法參數總是記不住，這裏記錄一下。 1.url: 要求為String類型的參數，（默認為當前頁地址）發送請求的地址。 2.type: 要求為String類型的參數，請求方式（p

   Python的反射機制、hasattr() getattr() setattr() 函數使用方法詳解

   對象 tee lin sel __main__ err ace traceback 一個 hasattr(object, name)判斷一個對象裏面是否有name屬性或者name方法，返回BOOL值，有name特性返回True， 否則返回False。需要註意的是name要用

   php上傳文件大小限制的方法詳解

   mem 限制 upload 文件夾 tro 最大 指定 php上傳文件 配置 打開php.ini，首先找到file_uploads = on ;是否允許通過HTTP上傳文件的開關。默認為ON即是開upload_tmp_dir ;文件上傳至服務器上存儲臨時文件的地方，如果沒指

   Canny邊緣檢測算法原理及其VC實現詳解(一)

   常用 差分 實現圖 還需要 鏈接 傳感器 出了 關系 位置 轉自：http://blog.csdn.net/likezhaobin/article/details/6892176 圖象的邊緣是指圖象局部區域亮度變化顯著的部分，該區域的灰度剖面一般可以看作是一個階躍，既從

   easyui分頁的使用方法

   function button borde con jquery 圖像 easyu 建立 easy 使用： $("#tt").datagrid("getPager").pagination(option); 例子： $("#tb").datagrid("getPage

   接口測試工具soapUI的安裝和使用方法詳解

   service 技術 key custom media 負載 bmp file text soapUI是一個開源測試工具，通過soap/http來檢查、調用、實現Web Service的功能/負載/符合性測試。 使用soapUI可以非常方便的實現接口的功能測試、穩

   Arrays 類的 binarySearch() 數組查詢方法詳解

   strong object tro search mage bject 技術分享 eight 獲得 Arrays類的binarySearch()方法，可以使用二分搜索法來搜索指定的數組，以獲得指定對象。該方法返回要搜索元素的索引值。binarySearch()方法提供多種重

   JS實現移動端下拉刷新更多分頁請求功能方法2.0

   keyframes 發生 usb 第一次 odr back eight urn 返回頂部 本次2.0升級版為js實現移動端加載更多下拉刷新更多分頁請求功能方法（數據一次請求，前端分頁，適用於數據流量較少，數據量壓力小的頁面）同時新增loading組件，turnToTop組件

   JavaScript中getBoundingClientRect()方法詳解

   script otto java chrome 頁面 支持 urn client fire getBoundingClientRect() 這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。