Sunday, July 17, 2011

Mengaktifkan button First / Last Pada GridView (Paging)

Saat kita mengunakan CGridView Control dari Yii, tampilan standar pagernya adalah First dan Last tidak tampil. yang tampil hanya Previous dan Next. Seperti yang terlihat pada gambar dibawah ini:




pada gambar diatas posisi pager saat ini adalah 3, berarti ada 4 kemugkinan yang bisa dipilih, First,Previous,Next atau Last, sedangkan yang tampil hanya dua pilihan Previous & Next.
misalkan saja code untuk menampilkan data di CGridView seperti ini:

$this->widget('zii.widgets.grid.CGridView', array(
'dataProvider'=>$model,
'pager'=>array('class'=>'CLinkPager'),
'enableSorting'=>true,
'columns'=>array(
'firstname', // display the 'title' attribute
'lastname', // display the 'name' attribute of the 'category' relation
array(
'name'=>'E-mail',
'value'=>$data->email,
),
array( // display a column with "view", "update" and "delete" buttons
'class'=>'CButtonColumn',
),
),
));


karena pada artikel ini kita membahas pager maka attributes selain pager kita diamkan dulu / tidak dibahas. Kita coba bahas di pager saja:

'pager'=>array('class'=>'CLinkPager')

kode diatas dimaksudkan bahwa pager yang di pakai CGridView itu diturunkan (extended) dari class CLinkPager, karena default dari pager adalah CPagination.
mengapa memilih CLinkPager ?
Karena pada class ini kita bisa mengatur Nama label dari First, Next, Previous dan Last sesuai dengan keinginan kita.

ok, balik lagi ke topik sebelumnya soal tombol page First & Last. Bagaimana nampilkannya ? karna di propertis dari CGridView sendiri tidak ada ?
jawabannya terletak pada pager.css yang ada di directory framework(framework/web/widgets/pagers/pager.css).
coba perhatikan class dari css ini:

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


jika kita tidak ingin tombol First & Last tidak tampil biarkan css class diatas seperti itu. tapi kalau mau kita munculkan ubah seperti ini:

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

}

maka kita akan mendapatkan paging seperti ini:




referensi:
* www.yiiframework.com
* http://www.yiiframework.com/search/?type=api-suggest&q=clinkpager

No comments:

Post a Comment