Yii2 分页类的扩展和listview引用

Yii2 本身提供了不错分页选项供用户设置,但是实际项目中我们往往需要复杂一些的分页样式,例如下图所示的效果，上下翻页可用和不可用均用图标来替换。

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA78AAAA/CAIAAACn2uiIAAAFfUlEQVR4nO3dsW7bRhzAYb+InqEvoffIrKfIGyiD9yBAkDVCOtRL0CUwwFUBOnnqUCAx4Axy2iUI1EG2dCJ1xz9JJYyl74OHKNCdWBE5/XAm1Yt/AACAjO/f7tOfizUAAJChngEAIEo9AwBAlHoGAIAo9QwAAFHqGQAAopJ0/vr921f1DAAAWWk6q2cAAChJ01k9AwBASZrO6hkAAErUMwAARKlnAACIUs8AABClngEAIEo9AwBAlHoGAIAo9QwAAFHqGQAAotQzAABEqWcAAIhSzwAAEKWeAQAgSj0D4/j8+XNVVdcdVVX16dOn407CQE4lcFbUMzCOqqpWq1XXUff391VVHXcSBnIqgWNYzqfT+TJ9OFv8wNeaTPpO//3bv+mPegZ+kuvr6+EDjzIJAzmVcK6W8+nkQaFEF7NJIv/EaD3Xntd2HMv5dDLZH7B/RJFj26OegXE8ieT6/c/1s2X705rSpbnX7sZugtqHRJ95uh9B7aOlPMGTOJXA0S1m29VhMSssVotZeSFL2jdnuwg9PHdvvvJxbJaz5C8Xs8lkOq0F+HI+ja+26hkYx6+eXH+vf3u7vnjbq54Xs91S3ytfF7PHEYN+u/j4OdOrnuPV/qufSuBH2O/NUn1GF5TWveeHTN6fr3wcy/l0Opvt/m43dru6HtibbqGegXH80sm1XF/8sf5rvX7Wr573JdsiPXTaEDkwdNqrvtUz0KK2TORXuuV8GluFoldu7L9y6Tg2L51dRh9/y9Z1jVXPwDhy0XN3d1d4uO6YXM3hwYEbT7meHwb2evVuL5p7M6+uruIDm5PUhudmU88wigObvIV6Dl0H1queC8fx+MfdU2rXiOz9km+rffFTz8A4DkbP3d3dzc1N7mFzYLmcDg6PDNw6Qj0Pu/Sid3pvPy1613N8UO7NfP78+fv374MDm5PUhudmU88wing9J4qXRx+5nncHVL6qpMf2hHoGxtGMnk3sbnu39vDgwEI55Ya3DkwNrufFrN99f9udkH4XbSSfUL3qee+mwdZDyL2Zl5eXL168KAR0+VTWhudmU88wjswVE+k+7uHvv8h/X0ZB7aVar9xIl779F81930b73viWegbGUYueL1++3DxqPswNzJVTYXh5YM2gem7c6N1H99tZasE87LqR0AHk3syXL1++efOmENDlU1kbnptNPcM4mnfrBZaaAXdy7LTdNfgQz6E0tvcMPCG16NluFW96t/YwN7Bw8fS49bzZTBn8GbFerzv3b24fZ9AXdxT/S3Jv5qtXr969e/f69esPHz60DmxOUhuem009w0jS69JK69RymaZtaTmpbxhnpqztNrcex+EN783THuq52zqrnoFxnPKVGz2/ZDk/24AMH7r3PLiedx+cxYG5et4Oz82mnmE8uy3ewjJTvpYjfc50vlyn/8gz+xDNRbF8HLVFLL34OrnUusOmh3oGxnHCdw0e4WKJ3fDyTTY/6GCSj6/AXY+FKzc+fvwYHHjwyo10eG429QxPXMt+w8Bbr5uTbVbUbXDvTR27AEU9A+M44W+sO3TBXbelP92qGXj5R+/v3Igfeu7NrKoqPrA5SW14bjb1DPxk6hkYh//FxslwKoGzop6BcUiuk+FUAmdFPQPjkFwnw6kEzop6BsYhuU6GUwmcFfUMjKOqqtVq1XXUarVK7x47yiQM5FQCZ+Wxm//b/Khn4Ce5vb2tquq6o6qqbm9vjzsJAzmVwFlRzwAAEKWeAQAgSj0DAECUegYAgCj1DAAAUeoZAACi1DMAAESpZwAAiFLPAAAQpZ4BACBKPQMAQJR6BgCAqDSd1TMAAJSk6ayeAQCgRD0DAECUegYAgCj1DAAAUeoZAACi1DMAAESpZwAAiKrV8//mPp/MGB+NxgAAAABJRU5ErkJggg==" alt="" />

步骤如下:

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