Yii2 分頁類的擴充和listview引用

標籤：abs   classname   hud   php   tmp   bak   dpx   vbo   vdc   

Yii2 本身提供了不錯分頁選項供使用者佈建,但是實際項目中我們往往需要複雜一些的分頁樣式,例如所示的效果，上下翻頁可用和不可用均用表徵圖來替換。

步驟如下:

1 , 查看項目分頁組件，一般位於項目\vendor\yiisoft\yii2\widgets\LinkPager.php位置，

2，在\vendor\yiisoft\yii2\widgets\目錄下新群組件tLinkPager.php，繼承LinkPager.php,代碼和注釋如下：

　　主要是重寫了renderPageButtons()方法，實現了2個功能：

       1)產生first prev next last四個連結 根據是否可點擊(disabled)來載入不同的圖片

　　 2)添加總條數和當前顯示條數label

<?phpnamespace yii\widgets;use Yii;use yii\base\InvalidConfigException;use yii\helpers\Html;use yii\base\Widget;use yii\data\Pagination;class tLinkPager extends LinkPager{        public $firstPageLabel= ‘<img src="/web/image/first.png">‘;    public $lastPageLabel= ‘<img src="/web/image/last.png">‘;    public $nextPageLabel= ‘<img src="/web/image/next.png">‘;    public $prevPageLabel=‘<img src="/web/image/pre.png">‘;    public $firstPageLabel1= ‘<img src="/web/image/first1.png">‘;    public $lastPageLabel1= ‘<img src="/web/image/last1.png">‘;    public $nextPageLabel1= ‘<img src="/web/image/next1.png">‘;    public $prevPageLabel1=‘<img src="/web/image/pre1.png">‘;        public $maxButtonCount = 5;        public $options = [‘class‘ => ‘m_pagination‘];    /**     * Renders the page buttons.     * 產生按鈕列表,用自訂圖片進行替換     * @return string the rendering result     */    protected function renderPageButtons()    {        $pageCount = $this->pagination->getPageCount();        if ($pageCount < 2 && $this->hideOnSinglePage) {            return ‘‘;        }            $buttons = [];        $currentPage = $this->pagination->getPage();            //產生first prev next last四個連結 根據是否可點擊(disabled)來載入不同的圖片        // first page        if ($this->firstPageLabel !== false) {            $buttons[] = $this->renderPageButton(($currentPage <= 0)?$this->firstPageLabel1:$this->firstPageLabel, 0,                     $this->firstPageCssClass, $currentPage <= 0, false);        }            // prev page        if ($this->prevPageLabel !== false) {            if (($page = $currentPage - 1) < 0) {                $page = 0;            }            $buttons[] = $this->renderPageButton(($currentPage <= 0)?$this->prevPageLabel1:$this->prevPageLabel, $page,                     $this->prevPageCssClass, $currentPage <= 0, false);        }            // internal pages        list($beginPage, $endPage) = $this->getPageRange();        for ($i = $beginPage; $i <= $endPage; ++$i) {            $buttons[] = $this->renderPageButton($i + 1, $i, null, false, $i == $currentPage);        }            // next page        if ($this->nextPageLabel !== false) {            if (($page = $currentPage + 1) >= $pageCount - 1) {                $page = $pageCount - 1;            }            $buttons[] = $this->renderPageButton(($currentPage >= $pageCount - 1)?$this->nextPageLabel1:$this->nextPageLabel, $page,                     $this->nextPageCssClass, $currentPage >= $pageCount - 1, false);        }            // last page        if ($this->lastPageLabel !== false) {            $buttons[] = $this->renderPageButton(($currentPage >= $pageCount - 1)?$this->lastPageLabel1:$this->lastPageLabel, $pageCount - 1,                     $this->lastPageCssClass, $currentPage >= $pageCount - 1, false);        }                    //添加文字   add by  16/10/24        //擷取每頁數量        $pagesize = $this->pagination->getPageSize();                $label=$currentPage*$pagesize."-".($currentPage+1)*$pagesize."&nbsp;"."共".$this->pagination->totalCount."條";                //添加總條數和當前顯示條數label        $buttons[]=Html::tag(‘li‘, Html::tag(‘span‘, $label));                        return Html::tag(‘ul‘, implode("\n", $buttons), $this->options);    }}

3 在視圖中引用，首先在引用該組件 use yii\widgets\vodLinkPager;

  其次使用時直接輸出<?php  echo vodLinkPager::widget([  ‘pagination‘ =>$pagination,   ]);?>即可

4 listview 或girdview 如何引用 ，首先在引用該組件 use yii\widgets\vodLinkPager;

其次輸出時添加選項‘pager‘=>[‘class‘=>vodLinkPager::className(),],即可 樣本如下

<?php   ListView::begin([    ‘dataProvider‘=>$dataProvider,    ‘viewParams‘=>[‘clist‘=>$clist],    ‘itemView‘=>‘vitem‘,        ‘layout‘=>‘{items}<div class="t-m-pager">{pager}</div>‘,    //添加下面這句即可    ‘pager‘=>[‘class‘=>vodLinkPager::className(),],    ]);  ListView::end();?> 

5 部分CSS 如下：

.m_pagination{    display: inline-block;    padding-left: 0;    margin: 20px 0;    border-radius: 4px;    width: 100%;}.m_pagination li{    display: inline;}.m_pagination > li > a, .m_pagination > li > span {    position: relative;    margin-left: -1px;    line-height: 1.42857143;    color: #1d1d1d;    text-decoration: none;    background-color: #fff;}.m_pagination > li > a{     padding: 0px 5px;}.m_pagination > li.next a, .m_pagination > li.last a,.m_pagination > li.first a, .m_pagination > li.prev a{     padding: 0px;}.m_pagination > li.active a{    color: var(--niceblue);}.m_pagination > li:nth-last-child(1) span{    float: right;    margin-right: 5px;    font-size: 13px;    position: absolute;    right: 5px;}.t-m-pager{    right: 0px;    position: relative;    text-align: center;    color: var(--niceblue);}

 

Yii2 分頁類的擴充和listview引用