Displaying Yii's CLinkPager "First" and "Last" Buttons

Yii provides an excellent set of tools for displaying paged data, namely the CListView and
CGridView widgets. These widgets are easy to use, are highly customizable, and provide the kind of pager that is in use all over the web. Which makes it all the more strange that the pager doesn't work quite as expected.

The strange default behavior is that built-in css attributes hide the "First" and "Last" buttons. In fact, if you're like me, you didn't even know that the pager had a "First" and "Last" button until you started looking into putting ones in there. If you view the page source and scroll down to the pager, you'll see these elements, each of them contained within <li class="first"> and <li class="last"> tags, respectively. These tags are targeted by a display:none css attribute contained in the default pager stylesheet.

I have no idea why these are hidden by default, but it's not too much work to make them visible.

Read on to see how to change:


You can't specify the pager css class directly in CListView/CGridView, but you can specify the pager model class. So what we'll do is subclass the default CLinkPager with our own pager, and specify what css file to use. We will then tell the CListView/CGridView to use our new pager.

Step 1: Create a new pager css file
If you don't already have a directory for your application's custom css, create one now (I simply have one called "css" under /webapp). Copy & paste the default pager css file, located at /yii/framework/web/widgets/pagers/pager.css, into your css directory, keeping the same file name. Open up this css file and comment out the display:none line at the bottom.

Step 2: Subclass CLinkPager
Create a new file in your /webapp/protected/components directory and name it LinkPager.php (it is going to subclass /yii/framework/web/widgets/pagers/CLinkPager.php). Open this file in your text editor and copy this code in there, replacing the the css file location with your file's actual location.

 *  Extending CLinkPager so that we can give it a custom css file

class LinkPager extends CLinkPager
        public $cssFile = '/css/pager.css';

Step 3: Use the new Subclass
Specify the new pager class In your CListView/CGridView declaration as follows:

        'pager'=>'LinkPager', // overriding the default CLinkPager class
)); ?>

Since you're subclassing the CLinkPager class, you can also modify any other default behavior, such as the link text, or the max number of pager buttons shown, or a few other attributes. You can also modify the new pager css as desired.



Thx, cool and helpfull in

Thx, cool and helpfull in right way!

You just saved me some real

You just saved me some real head scratching for this overlooked trick, I gave up before looking at the source :)

Strange indeed.

PHP Warning


I get this error:

include(LinkPager.php): failed to open stream: No such file or directory

What's happening?


Check your config

Can you check your config file and make sure you're including the path to the directory in which LinkPager.php is located?

For me, I have this in main.php:


This will ensure that Yii knows to look in this location for class definitions.

I revolved. I misspelled the

I revolved.

I misspelled the class name.


Simple method

Add style

ul.yiiPager .first, ul.yiiPager .last {

display: inline;


Works, but hacky

Sure, that works, but you're overriding behavior (making explicitly visible) that itself is an override (declaring the elements hidden). Personally, I'd rather keep the styling clean.

Post new comment

  • Lines and paragraphs break automatically.

More information about formatting options
