[Akshay Vanjare]

I want to share a simple way to add Ajax filter in CListView with enable history support.

Controller

First we will make some changes in Controller.

public function actionIndex()
{
        $model=new Test1('search');
        $model->unsetAttributes();  // clear any default values
        if(isset($_GET['Test1']))
            $model->attributes=$_GET['Test1'];

        if(isset($_GET['ajax']) && $_GET['ajax']=='ajaxListView')   {
            $this->renderPartial('index',array(
                'dataProvider'=>$model,
            ));
        } else  {
            $this->render('index',array(
                'dataProvider'=>$model,
            ));
        }    
}

View

In our CListView, first we will change our data provider.

<?php $this->widget('zii.widgets.CListView', array(
    'dataProvider'=>$dataProvider->search(),
    'itemView'=>'_view',
        'enableHistory' => TRUE,
        'pagerCssClass' => "pagination",
        'id' => 'ajaxListView',
)); ?>

We now add a form with get method for filtering.

<div class="form">
    <?php echo CHtml::beginForm('', 'get', array('id'=>'searchform')); ?>

    <div class="row">
        <?php echo CHtml::activeLabel($dataProvider,'id'); ?>
        <?php echo CHtml::activeTextField($dataProvider,'id') ?>
    </div>

    <div class="row">
        <?php echo CHtml::activeLabel($dataProvider,'fname'); ?>
        <?php echo CHtml::activeTextField($dataProvider,'fname') ?>

    <?php echo CHtml::endForm(); ?>
</div><!-- form -->

Now add a Jquery script that send AJAX request when value in input filed is changed or enter button is pressed.

<?php
Yii::app()->clientScript->registerScript('search',
"$('#searchform').change(function(event) {
            SearchFunc();
            return false;
});
jQuery('input').keydown(function (event) {
    if (event.keyCode && event.keyCode == '13') {
        SearchFunc();
        return false;
    } else {
        return true;
    }
});
function SearchFunc()   {
    var data = $('input').serialize();
    var url = document.URL;
    var params = $.param(data);
    url = url.substr(0, url.indexOf('?'));
    window.History.pushState(null, document.title,$.param.querystring(url, data));
}
");
?>

Complete Code of our view is:

<?php
$this->breadcrumbs=array(
    'Test',
);

$this->menu=array(
    array('label'=>'Create Test1', 'url'=>array('create')),
    array('label'=>'Manage Test1', 'url'=>array('admin')),
);
?>
<h1>Test</h1>

<div class="form">
    <?php echo CHtml::beginForm('', 'get', array('id'=>'searchform')); ?>
    
    <div class="row">
        <?php echo CHtml::activeLabel($dataProvider,'id'); ?>
        <?php echo CHtml::activeTextField($dataProvider,'id') ?>
    </div>
    <div class="row">
        <?php echo CHtml::activeLabel($dataProvider,'fname'); ?>
        <?php echo CHtml::activeTextField($dataProvider,'fname') ?>
        
    <?php echo CHtml::endForm(); ?>
</div><!-- form -->

<?php $this->widget('zii.widgets.CListView', array(
    'dataProvider'=>$dataProvider->search(),
    'itemView'=>'_view',
        'enableHistory' => TRUE,
        'id' => 'ajaxListView',
)); ?>

<?php
Yii::app()->clientScript->registerScript('search',
"$('#searchform').change(function(event) {
            SearchFunc();
            return false;
});
jQuery('input').keydown(function (event) {
    if (event.keyCode && event.keyCode == '13') {
        SearchFunc();
        return false;
    } else {
        return true;
    }
});
function SearchFunc()   {
    var data = $('input').serialize();
    var url = document.URL;