如何在YII上设置CGridView的分页样式？

Question

How to styling the pagination of CGridView at YII?

At the cgridview, it is displaying the pager by pic.

I would like to display the pager position by following.

First Previous 1 2 3 4 5 6 7 8 9 10 Next Last

and I want to remove "Go to page: ".

How should I do?

Answer 1

Simply set the header property of the pager to the empty string.

Example:

$this->widget('zii.widgets.CGridView', array(
        // ...other properties here...
        'pager' => array('class' => 'CLinkPager', 'header' => ''),
    ));

Answer 2

If you need only to change style, you should write your own css file and apply it to the gridView (see the end of the post). But if your changes are deeper than that you will have to extend the Pager.

I have done this a long time ago: I extended the Link Pager to fit my need. In the components directory I created a new pager:

class PagerSA extends CLinkPager

Where I rewritted some methods to fit what I wanted (The modifications are really small). Here's my code that you can take as example. As I said I modified really few things from the original pager. If your pager is a lot different from a CLinkPager or a CListPager you should extend CBasePager

class PagerSA extends CLinkPager
{
    const CSS_FIRST_PAGE='first';
    const CSS_LAST_PAGE='last';
    const CSS_PREVIOUS_PAGE='previous';
    const CSS_NEXT_PAGE='next';
    const CSS_INTERNAL_PAGE='page';
    const CSS_HIDDEN_PAGE='hidden';
    const CSS_SELECTED_PAGE='selected';

    /**
     * @var integer maximum number of page buttons that can be displayed. Defaults to 10.
     */
    public $maxButtonCount=5;
    /**
     * @var string the text label for the next page button. Defaults to 'Next >'.
     */
    public $nextPageLabel;
    /**
     * @var string the text label for the previous page button. Defaults to '< Previous'.
     */
    public $prevPageLabel;
    /**
     * @var string the text label for the first page button. Defaults to '<< First'.
     */
    public $firstPageLabel;
    /**
     * @var string the text label for the last page button. Defaults to 'Last >>'.
     */
    public $lastPageLabel;
    /**
     * @var string the text shown before page buttons. Defaults to 'Go to page: '.
     */
    public $header;
    /**
     * @var string the text shown after page buttons.
     */
    public $footer='';
    /**
     * @var mixed the CSS file used for the widget. Defaults to null, meaning
     * using the default CSS file included together with the widget.
     * If false, no CSS file will be used. Otherwise, the specified CSS file
     * will be included when using this widget.
     */
    public $cssFile;
    /**
     * @var array HTML attributes for the pager container tag.
     */
    public $htmlOptions=array();

    /**
     * Initializes the pager by setting some default property values.
     */
    public function init()
    {
        if($this->nextPageLabel===null)
            $this->nextPageLabel=Yii::t('yii','Suivante >');
        if($this->prevPageLabel===null)
            $this->prevPageLabel=Yii::t('yii','< Précédente');
        if($this->firstPageLabel===null)
            $this->firstPageLabel=Yii::t('yii','<< Première');
        if($this->lastPageLabel===null)
            $this->lastPageLabel=Yii::t('yii','Dernière >>');
        if($this->header===null)
            $this->header=Yii::t('yii','');

        if(!isset($this->htmlOptions['id']))
            $this->htmlOptions['id']=$this->getId();
        if(!isset($this->htmlOptions['class']))
            $this->htmlOptions['class']='yiiPager';
    }

    /**
     * Creates the page buttons.
     * @return array a list of page buttons (in HTML code).
     */
    protected function createPageButtons()
    {
        if(($pageCount=$this->getPageCount())<=1)
            return array();

        list($beginPage,$endPage)=$this->getPageRange();
        $currentPage=$this->getCurrentPage(false); // currentPage is calculated in getPageRange()
        $buttons=array();

        // first page
        $buttons[]=$this->createPageButton($this->firstPageLabel,0,self::CSS_FIRST_PAGE,$currentPage<=0,false);

        // prev page
        if(($page=$currentPage-1)<0)
            $page=0;
        $buttons[]=$this->createPageButton($this->prevPageLabel,$page,self::CSS_PREVIOUS_PAGE,$currentPage<=0,false);

        //2 first pages
        if($currentPage==3)
        {
            $buttons[]=$this->createPageButton(1,0,self::CSS_INTERNAL_PAGE,false,0==$currentPage);
            $buttons[]= ' ... ';
        }

        if($currentPage>3)
        {
            $buttons[]=$this->createPageButton(1,0,self::CSS_INTERNAL_PAGE,false,0==$currentPage);
            $buttons[]=$this->createPageButton(2,1,self::CSS_INTERNAL_PAGE,false,1==$currentPage);
            $buttons[]= ' ... ';
        }

        // internal pages
        for($i=$beginPage;$i<=$endPage;++$i)
            $buttons[]=$this->createPageButton($i+1,$i,self::CSS_INTERNAL_PAGE,false,$i==$currentPage);

        //3 lasts pages
        if($endPage<$pageCount-2)
        {
            $buttons[]= ' ... ';
            for($i=$pageCount-2;$i<=$pageCount-1;++$i)
            $buttons[]=$this->createPageButton($i+1,$i,self::CSS_INTERNAL_PAGE,false,$i==$currentPage);
        }

        if($endPage==$pageCount-2)
        {
            $buttons[]= ' ... ';
            $buttons[]=$this->createPageButton($pageCount,$pageCount-1,self::CSS_INTERNAL_PAGE,false,$pageCount-1==$currentPage);
        }   

        // next page
        if(($page=$currentPage+1)>=$pageCount-1)
            $page=$pageCount-1;
        $buttons[]=$this->createPageButton($this->nextPageLabel,$page,self::CSS_NEXT_PAGE,$currentPage>=$pageCount-1,false);

        // last page
        $buttons[]=$this->createPageButton($this->lastPageLabel,$pageCount-1,self::CSS_LAST_PAGE,$currentPage>=$pageCount-1,false);

        return $buttons;
    }

}

Then to apply it in your c grid view you have to put something like:

'pager' => array(
    'class' => 'SaAdminPager',
    'cssFile'=>'/themes/version_3/css/widgets/adminPager.css',
    'header'=>'',
     ),
'pagerCssClass'=>'pagination pagination-centered', 

Answer 3

    $this->widget('bootstrap.widgets.TbGridView',array(
        'id'=>'grid-view',
        'htmlOptions'=>array('style'=>'margin-top:95px;'),
        'dataProvider'=>$model->search(),
        'type'=>'striped bordered condensed',
    'filter'=>$model,
    'columns'=>array(
    ......
.......
    ));
    echo 'Goto Page '.CHtml::textField(ucfirst(Yii::app()->controller->id)."_page",'1',
            array('id'=>'jump-to-page',
            ));
    ?>
    <script>
        $('#jump-to-page').change(function(e){
            $.fn.yiiGridView.update('grid-view', {
                data: $(this).serialize()
            });
            e.preventDefault();
        });
    </script>