How do I add a class name to pager attribute in Yii's widget?

2.8k Views Asked by At

This is my table in Yii:

$this->widget('GridView', array(
        'dataProvider' => $users,
        'itemsCssClass'=>'table',
        'pager' => array(
                'class'             => 'CLinkPager',
                'prevPageLabel'     => 'Previous',
                'nextPageLabel'     => 'Next',
                'htmlOptions'       =>  array(
                                            'class' => 'btn btn-info'
                                        )
        ),
        'columns' => array(
            array(
                'name' => 'User ID',
                'type' => 'raw',
                'value' => 'CHtml::encode($data["id"])'
            ),
            array(
                'name' => 'Username',
                'type' => 'raw',
                'value' => 'CHtml::encode($data["username"])'
            ),
            array(
                'name' => 'Name',
                'type' => 'raw',
                'value' => 'CHtml::encode($data["name"])'
            ),
            array(
                'name' => 'Email',
                'type' => 'raw',
                'value' => 'CHtml::encode($data["email"])'
            ),
            array(
                'name' => 'Role',
                'type' => 'raw',
                'value' => 'CHtml::encode($data["function"])'
            ),
            array(
                'name' => 'Status',
                'type' => 'raw',
                'value' => 'CHtml::encode($data["active"])'
            ),
            array(
                'name'  => 'Action',
                'type'  => 'raw',
                'value' => 'CHtml::link("<button  type=\'button\'  class= \'btn btn-info user_ajax\' data-toggle=\'modal\' data-target=\'#myModal\'>Info</button>")',
            ),
        ),  

    ));

I have a pagination and it is working, what i want to is to add a class name from bootstrap to each li generated. Now with this example the classes btn and btn-info is added to ul. What should I changed ? thx

2

There are 2 best solutions below

0
On

Try to use 'hiddenPageCssClass' and 'selectedPageCssClass' properties of the pager

'pager' => array(
                'class'             => 'CLinkPager',
                'prevPageLabel'     => 'Previous',
                'nextPageLabel'     => 'Next',
                'hiddenPageCssClass'=>'notselected', // set it for page buttons that are not selected
                'selectedPageCssClass'=>'selected', // set it for the current page button
                'htmlOptions'       =>  array(
                                            'class' => 'btn btn-info'
                                        )
        ),

To check more properties click here

0
On

Finally I found a solution: I was missing a pager property

'pager' => array(
                'class'             => 'CLinkPager',
                'prevPageLabel'     => 'Previous',
                'nextPageLabel'     => 'Next',
                'header' => '',
                // 'htmlOptions'        =>  array(
                                            // 'class' => 'btn btn-info'
                                        // )
                'previousPageCssClass' => 'btn btn-info btn-sm',
                'selectedPageCssClass' => 'btn btn-warning btn-sm',
                'internalPageCssClass' => 'btn btn-info btn-sm',
                'firstPageCssClass' => 'btn btn-info btn-sm',
                'nextPageCssClass'  => 'btn btn-info btn-sm',
        ),