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

【问题标题】：How to styling the pagination of CGridView at YII?如何在 YII 设置 CGridView 的分页样式？
【发布时间】：2013-01-18 10:17:31
【问题描述】：

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

在cgridview，它是按图片显示寻呼机。

我想通过关注来显示寻呼机位置。

第一个上一个 1 2 3 4 5 6 7 8 9 10 下一个最后一个

我想删除“转到页面：”。

我该怎么办？

【问题讨论】：

标签： php yii

【解决方案1】：

只需将寻呼机的header 属性设置为空字符串。

例子：

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

【讨论】：

如何按 First 上一个 1 2 3 4 5 6 7 8 9 10 Next Last 重新排列？
@tharsoe：我不明白这个问题。上面的代码不符合您的要求吗？
你看到我的附件图片了吗？好的，我给你解释一下。在我的gridview 中，分页显示为Previous First 1 2 3 4 5 6 7 8 9 10 Last Next。而“Previous”位于左侧，与“First”相距甚远。我想将此分页显示为 First Previous 1 2 3 4 5 6 7 8 9 10 Next Last。 Fist 和 Previous 应该与其他的距离相同。
@tharsoe：按钮是相同的，唯一可以改变它们呈现方式的是它们的 CSS 类。您的页面显然包含导致此布局的 CSS。找出负责的 CSS 规则。这是基本调试。

【解决方案2】：

如果您只需要更改样式，则应编写自己的 css 文件并将其应用到 gridView （见文末）。但是，如果您的更改比这更深，您将不得不扩展 Pager。

我很久以前就这样做了：我扩展了 Link Pager 以满足我的需要。在components 目录中我创建了一个新的寻呼机：

class PagerSA extends CLinkPager

我重写了一些方法以适应我想要的（修改真的很小）。这是我的代码，您可以作为示例。正如我所说，我从原始寻呼机中修改了很少的东西。如果您的寻呼机与CLinkPager 或CListPager 有很大不同，您应该扩展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 &gt;'.
     */
    public $nextPageLabel;
    /**
     * @var string the text label for the previous page button. Defaults to '&lt; Previous'.
     */
    public $prevPageLabel;
    /**
     * @var string the text label for the first page button. Defaults to '&lt;&lt; First'.
     */
    public $firstPageLabel;
    /**
     * @var string the text label for the last page button. Defaults to 'Last &gt;&gt;'.
     */
    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 &gt;');
        if($this->prevPageLabel===null)
            $this->prevPageLabel=Yii::t('yii','&lt; Précédente');
        if($this->firstPageLabel===null)
            $this->firstPageLabel=Yii::t('yii','&lt;&lt; Première');
        if($this->lastPageLabel===null)
            $this->lastPageLabel=Yii::t('yii','Dernière &gt;&gt;');
        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;
    }

}

然后要将其应用到您的 c 网格视图中，您必须输入以下内容：

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

【讨论】：

【解决方案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>

【讨论】：