Yii2 ListView мысалы: Pagination түрін өзгерту

Yii2 стандартты pagination-ы ListView негізінде yii\widgets\LinkPager объектісі, онда стандартты Bootstrap стильдері пайдаланылады. Онда арнайы баптаулар жасау өте оңай. Сол баптауларға қысқаша шолу жасайық.

1. Батырмалар аттарын өзгерту

Батырмаларын аттарын өзгертудің еш қиындығы жоқ, оны былай жасауға болады:

ListView::widget([
    'dataProvider' => $listDataProvider,
    'pager' => [
        'firstPageLabel' => 'first',
        'lastPageLabel' => 'last',
        'prevPageLabel' => 'previous',
        'nextPageLabel' => 'next',
    ],
])

Стильдер Bootstrap негізінде болғандықтан батырмалар үшін Glyphicons суреттерін пайдалануға болады. Мысалы, батырмалар үшін < және > символын пайдалану үшін былай жасай аламыз:

ListView::widget([
    'dataProvider' => $listDataProvider,
    'pager' => [
        'firstPageLabel' => 'first',
        'lastPageLabel' => 'last',
        'prevPageLabel' => '<span class="glyphicon glyphicon-chevron-left"></span>',
        'nextPageLabel' => '<span class="glyphicon glyphicon-chevron-right"></span>',
    ],
])

2. Батырмалар саны

Баптаулардың ішінде maxButtonCount параметрі максимум қанша батырма керек екендігін көрсетеді.

ListView::widget([
    'dataProvider' => $listDataProvider,
    'pager' => [
        'firstPageLabel' => 'first',
        'lastPageLabel' => 'last',
        'prevPageLabel' => 'previous',
        'nextPageLabel' => 'next',
        'maxButtonCount' => 3,
    ],
])

Сонда суретте көрсетілгеніндей, үш қана батырма пайда болады.

3. CSS стильді өзгерту

Тағы да сол баптауларға өзімізге қажет стиль аттарын қоса аламыз және оларды кейн қалағанымызша өзгерте аламыз.

ListView::widget([
    'dataProvider' => $listDataProvider,
    'pager' => [
        'firstPageLabel' => 'first',
        'lastPageLabel' => 'last',
        'prevPageLabel' => 'previous',
        'nextPageLabel' => 'next',
        'maxButtonCount' => 3,
        
        // Customzing options for pager container tag
        'options' => [
            'tag' => 'div',
            'class' => 'pager-wrapper',
            'id' => 'pager-container',
        ],
        
        // Customzing CSS class for pager link
        'linkOptions' => ['class' => 'mylink'],
        'activePageCssClass' => 'myactive',
        'disabledPageCssClass' => 'mydisable',
        
        // Customzing CSS class for navigating link
        'prevPageCssClass' => 'mypre',
        'nextPageCssClass' => 'mynext',
        'firstPageCssClass' => 'myfirst',
        'lastPageCssClass' => 'mylast',
    ],
])

Бұл кішігірім ескертпе (шпаргалка), біреу-міреуге пайдасы тиіп қалар.