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.