Кнопка сброса фильтра CGridView

JS для работы кнопки сброса фильтра: 

<script>
$(function(){
    $(document).on('click', '#posts-grid-reset', function(){
        var id = 'posts-grid';
        var inputSelector = '#' + id + ' .filters input, ' + '#' + id + ' .filters select';
        $(inputSelector).each(function (i, o) {
            $(o).val('');
        });
        var data = $.param($(inputSelector));
        $.fn.yiiGridView.update(id, {data: data});
        return false;
    });
});
</script>

posts-grid-reset - id кнопки сброса фильтра

posts-grid - id виджета CGridView

PHP код для работы кнопки сброса фильтра: 

<?php


echo CHtml::resetButton(
    'Сбросить фильтр', 
    array('id'=>'posts-grid-reset', 'class'=>'btn btn-default')
);

Действие перед отправкой AJAX

Для вызова js скрипта перед отправкой данных используется элемент beforeAjaxUpdate. Например нам необходимо вызвать свой скрипт блокировки контента на время загрузки данных (при этом loadingCssClass нам не подходит): 

$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $model->search(),    
    'filter' => $model,
    //...
    'beforeAjaxUpdate' => 'function(){ blockUI("#posts-grid"); }',
    //...
));

Действие после обновления данных AJAX

Для вызова после обновления данных в виджете CGridView используется элемент afterAjaxUpdate. В предыдущем примере мы использовали его для переопределения календаря (Yii Framework, отображение списка (таблицы) записей с помощью виджета CGridView и Yii Framework, CGridView поиск по диапазону дат (date range) с помощью виджета datepicker):

<?php


$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $model->search(),    
    'filter' => $model,
    //...
    'afterAjaxUpdate' => 'reinstallDatePicker',
    //...
));

Стилизация полей фильтра виджет CGridView

Для добавления placeholder (заполнитель) или класса для поля ввода придется добавить поле напрямую в элемент filter. Например добавим поля ввода (<input type="text" />): 

//...
'filter' => CHtml::activeTextField(
    $model, 
    'media_content_access_id', 
    array('class'=>'form-control', 'placeholder' => 'ID')
),
//...

Более подробный код виджета: 

<?php


$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $model->search(),    
    'filter' => $model,
    //...
    'columns' => array(
        array(
            //html опции для заголовка таблицы
            'headerHtmlOptions' => array('class'=>'sorting'),
            //имя поля
            'name' => 'id',
            //html опции для ячейки фильтра
            'filterHtmlOptions' => array('class' => 'filter-id'),
            //поле фильтра
            'filter' => CHtml::activeTextField(
                $model, 
                'media_content_access_id', 
                array('class'=>'form-control', 'placeholder' => 'ID')
            ),
        ),
        //...
    ),
    //...
));

Добавим поле для выпадающего списка в фильтр (<select><option>Все</option> ... </select>): 

//...
'filter' => CHtml::activeDropDownList(
    $model, 
    'visibility', 
    array('' => 'Все', 1 => 'Опубликовано', 0 => 'Не опубликовано'), 
    array('class'=>'form-control')
),
//...

или, пример списка из другой таблицы: 

//...
'filter' => CHtml::activeDropDownList(
    $model, 
    'type', 
    CMap::mergeArray(
        array('' => 'Все', 0 => 'Неизвестно'),
        CHtml::listData(
            Type::model()->findAll(), 
            'id', 
            'name'
        ), 
    array('class'=>'form-control')
),
//...

Более подробный код виджета: 

<?php
$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $model->search(),    
    'filter' => $model,
    //...
    'columns' => array(
        //...
        array(
            //html опции для заголовка таблицы
            'headerHtmlOptions' => array('class'=>'sorting'),
            //имя поля
            'name' => 'visibility',
            //поле фильтра
            'filter' => CHtml::activeDropDownList(
                $model, 
                'visibility', 
                array('' => 'Все', 1 => 'Опубликовано', 0 => 'Не опубликовано'), 
                array('class'=>'form-control')
            ),
        ),
        array(
            //html опции для заголовка таблицы
            'headerHtmlOptions' => array('class'=>'sorting'),
            //имя поля
            'name' => 'type',
            //поле фильтра
            'filter' => CHtml::activeDropDownList(
                $model,
                'type', 
                array('' => 'Все', 1 => 'Опубликовано', 0 => 'Не опубликовано'), 
                array('class'=>'form-control')
            ),
        ),
        //...
    ),
    //...
));

Выбор количества записей на страницу

Как сделать выбор количества записей на страницу описано здесь: Yii Framework, отображение списка (таблицы) записей с помощью виджета CGridView (Выбор количества записей на страницу)

Единственное, что хочу заметить - это то, что код вывода списка: 

CHtml::dropDownList(
    'pageSize', 
    $pageSize, 
    array(
        25 => 25,
        50 => 50,
        100 => 100,
        300 => 300,
        500 => 500
    ), 
    array(
        'onchange' => "$.fn.yiiGridView.update('mca-grid',{ data:{pageSize: $(this).val() }})"
    )
)

Может быть выведен в любом месте представления, а не только в самом виджете CGridView