Yii2 分页类的扩展和listview引用

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

<?php

namespace 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);
}