Yii: Что можно сделать с листалкой Yii pager в CListView и CGridView?

1. Заменить листалку-ссылками (указывалка страниц) на листалку-выпадалку (выпадающий список страниц).

Это удобно для быстрого выбора страницы, к которой перейти.

Для этого всего лишь переопределяем класс листалки. По умолчанию она обращалась к CLinkPager, а мы возьмём и укажем 'class' => 'CListPager'. Получается, так сказать, dropdown pager вместо pager with links.

<?php $this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'itemView'=>'_view', 
'template'=>"{pager}<hr>\n{items}\n{pager}",
'pager' => array(
           'class' => 'CListPager',
       ),
)); ?>

2. Переназначить параметры по-умолчанию своими параметрами.

Там же, в вызове виджета листалки на странице, прописываем: 

...
'pager' => array(
           'firstPageLabel'=>'<<',
           'prevPageLabel'=>'<',
           'nextPageLabel'=>'>',
           'lastPageLabel'=>'>>',
           'maxButtonCount'=>'10',
           'header'=>'<span>Листалочка страничек:</span>',
           'cssFile'=>false,
       ), 
...

3. Изменить css-стили оформления листалки pager на собственные.

Тут можно пойти 2-мя путями: закрыть стили по-умолчанию и в общем файле main.css прописать свои стили; и создать отдельно css файл со стилями для pager и указать его в параметре cssFile.

Пойдём по первому пути, зачем городить огород рабицей. Yii pager использует стили из файла pager.css по-умолчанию. Поэтому перво-наперво отключим pager.css. Для этого установим в false свойство листалки из CBaseListView.

$this->widget('zii.widgets.CListView', array(
'ajaxUpdate'=>true,
'dataProvider'=>$book->search(),
'itemView'=>'_book',
'pager'=>array('cssFile'=>false, 'class'=>'CLinkPager'),
));

А дальше в файле main.css допишем свои стили. Итак, вот как выглядит листалка Yii pager с неотключённым файлом стилей pager.css:

А вот как она начинает выглядеть со строчкой 'cssFile'=>false (смотрите жирным в верхнем куске кода) (p.s. так она выглядит в случае loco.ru, потому что мы скинули стили для <li>, у вас вид может быть другим, во всяком случае не коричневым уж наверняка):

Дальше. Копируем сожержимое /YiiRoot/framework/web/widgets/pagers/pager.css, в наш файл общих стилей main.css и вуаля:

И всё-таки имеет смысл городить огород рабицей (доски мокнут, гниют, забор провисает). Давайте наши стили для листалки хранить не в общем main.css, а в отдельном для них файле - pager.css (создадим его в той же папке /css). И тогда вместо 'pager'=>false будем указывать путь к /css/pager.css

<?php $this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'itemView'=>'_view', 
'template'=>"{pager}<hr>\n{items}\n{pager}",
'pager' => array(
           'firstPageLabel'=>'&larr;',
           'prevPageLabel'=>'<',
           'nextPageLabel'=>'>',
           'lastPageLabel'=>'&rarr;',
           'maxButtonCount'=>'10',
           'header'=>'<span>Листалка страниц:</span>',
           //'cssFile'=>false,
           'cssFile'=>Yii::app()->getBaseUrl(true).'/css/pager.css'
),
'ajaxUpdate'=>false, 
)); ?>  

А можно теперь залезть в наш pager.css и закомментировать скрытие ссылок на первую и последнюю страницы в самом конце файла.

/**
 * Hide first and last buttons by default.
 */
ul.yiiPager .first,
ul.yiiPager .last
{
//display:none;
}

Вот что получилось

Давайте пойдём до конца и создадим компонент /components/LinkPager.php, который будет субклассом для CListPager или CLinkPager

<?php
/**
 *  Extending CLinkPager so that we can give it a custom css file
 */

class LinkPager extends CLinkPager
{
        public $cssFile = '/css/pager.css';
        public $header = 'Страницы ';
}

И в вызове виджета переопределим класс pager'а

<?php $this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'itemView'=>'_view', 
'template'=>"{pager}<hr>\n{items}\n{pager}",
'pager'=>'LinkPager', // overriding the default CLinkPager class
'ajaxUpdate'=>false,
)); ?>

Вот и всё. Хотя не совсем ↓