Filter data in CListView and CGridView using AJAX. How?

Hello. I create search widget which using CHtml::ajaxSubmitButton send data in Filter action

public function actionFilter()

{

            $session=new CHttpSession;

            $session->open();

            $session['adm_area']=$_POST['re']['adm_area'];

}          

For test i save filter data in session. Then i add this data to add SearchCondition.

My List action:

public function actionList()

        {

            $this->publishJsCss();

            Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/protected/controllers/js/hover.js');

            $session=new CHttpSession;

            $session->open();

            $criteria=new CDbCriteria();

            $criteria->addSearchCondition('adm_area',$session['adm_area']);

            $dataProvider=new CActiveDataProvider('estate', array(

            'criteria'=>$criteria,

            'pagination'=>array('pageSize'=>10,),

            ));

            $this->render('estate', array('dataProvider'=>$dataProvider,));

        }

Estate view:

<?php

$this->widget('zii.widgets.CListView', array(

    'dataProvider'=>$dataProvider,

    'itemView'=>'_re',

    'sortableAttributes'=>array('price'=>'price'),

    'template'=>"{summary}{sorter}{pager}{items}\n{pager}",

    'cssFile'=>false,

    'pager'=>array('header'=>'','cssFile'=>false),

    ));

    ?>

How reload CListView items using AJAX after add SearchCondition? Thank you in advance for your help.

Hi, did you figure this out? Thanks!

yea, filtering CListView would be very nice. What i like about CListView vs. CGridView is that listview has independent view files for each row, while gridview echos all the data out. I need to make some pretty custom rows and filter them, and looking like a plain jane table like gridview produces won’t do. So I’m about to try to modify the html gridview spits out (e.g. so instead of <td> elements like divs are used). But my guess is that all the sorting/filtering/paging js all breaks.

So Basically CListView with filtering would give you the most important stuff from gridview, but with cleaner html _view files for each row/item. Would love to see ListView extended to do this right.

You can achive it by creating your own ajax pager. read this post for know how.

Then you can configure your CListView for use the pager:

$this->widget('zii.widgets.CListView', array(

    'dataProvider'=>$dataProvider,

    'itemView'=>'_post',   // refers to the partial view named '_post'

    'pager'=>array('class'=>'myAjaxPager'),

));

Hi,

i’d say the easiest way is to call the js update-function of the listview after your ajax request is completed.

By defining your ajaxSubmitButton something like this:

ajaxSubmitButton('Lets go', 'REQUEST_URL', array('success'=>'$.fn.yiiListView.update("LIST_ID");')); // Replace LIST_ID with the ID of the CListView you want to update

After the ajax call of your ajaxSubmitButton was successful (and the search data was stored inside the session) it triggers the build-in js function that updates the listview.

Regards

Anybody developed an elegant solution for this yet?

Ideally what I’m after is a filter row at the top that works just like CGridView but instead of table rows we have CListView instead.

Anyone else agree that CListView should be enhanced to include the filtering functionality, similar to CGridView? Furthermore, I think there should be an option to put the sorting filters into a dropdown.

we can update CListView similar to CGridView. In a form we have input field. When form submitted, ajax call occured. In our list action we can get value of our field via $_GET. and then apply necessary conditions to our criteria. Sorry for my bad english )

   

$('form').submit(function(){

       $.fn.yiiListView.update('list', {

             data: $(this).serialize()

        });

         return false;

});

following link will help you to filter data in CListView using AJAX.

http://www.yiiframework.com/forum/index.php/topic/36820-clistview-ajax-filtering-with-history-enable/