CGridView automatically extends when scrolling to the end


I don’t want to use the pagination of the CGridView, instead I want the table to extend itself automatically when scrolling to the button of it. Like it is on Facebook when you scroll to the bottom of the when viewing a news feed.

Is there already an extension available or what would be the easiest way to implement it?

Thank you!


in the Model : Utilisateur.php

	public function search()


		$criteria=new CDbCriteria;



		$criteria->compare('UserName', $this->UserName, true);

		$criteria->limit = 25;

		return new CActiveDataProvider(get_class($this), array(





in the Controlleur : UtilisateurControlleur.php :

	public function actionAdmin()


		$model=new Utilisateur;


		$UtilisateurData = Yii::app()->request->getQuery('Utilisateur');

		if($UtilisateurData !== null)

			$model->attributes = $UtilisateurData;





	public function actionSelectMore()


		$models = Utilisateur::model()->findAllBySql("SELECT * FROM Utilisateur LIMIT ".$_GET['offset'].",5");

		$tab = array();

		foreach($models as $model){

			$tab[] = $model->getAttributes();




in the View : Admin.php


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















	'afterAjaxUpdate'=>'function(){	var elem = $(".grid-view table tbody"); if(elem[0].scrollHeight<=300) elem.height("auto"); }',



in the CSS File :

#utilisateur-grid table tbody {

    height: 300px;

    overflow-x: hidden;

    overflow-y: auto;


in the JS File :

$(document).ready(function() {

	var killScroll = false; 

	var elem = $("#utilisateur-grid table.items tbody");


                if  (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight() - 1){ 

			 if (killScroll == false) {

                                killScroll = true;


					async: false,

					url: "index.php?r=utilisateur/SelectMore&offset="+$('table.items >tbody >tr').length,

					type: "post",

					contentType: "application/json; charset=utf-8",

            				dataType: "json",

					success: function(data){


								var classTR = $('table.items >tbody >tr:last').attr("class");

								for(var i=0; i < data.length; i++){

									if(classTR == "odd") classTR="even"; else classTR="odd";

									elem.append("<tr class="+classTR+"><td>"+data[i]['UserID']+"</td><td>"+data[i]['Login']+"</td><td>"+data[i]['UserName']+"</td><td class='button-column'><a href='/dbfact.test/index.php?r=utilisateur/view&amp;id="+data[i]['UserID']+"' title='Voir' class='view'><img alt='Voir' src='images/view.png'></a> <a href='/dbfact.test/index.php?r=utilisateur/update&amp;id="+data[i]['UserID']+"' title='Mettre à jour' class='update'><img alt='Mettre à jour' src='images/update.png'></a> <a href='/dbfact.test/index.php?r=utilisateur/delete&amp;id="+data[i]['UserID']+"' title='Supprimer' class='delete'><img alt='Supprimer' src='images/delete.png'></a></td></tr>");


								killScroll = false; 









$(document).ready(function() {

	$("table.items tbody").each(function(){

		if(this.scrollHeight<=300) = "auto";



Enjoy :)

Hi. Can you please tell , what is JS file’s name and how to associate it with the above code. I don’t see it being called anywhere ?


you can call the JS file in the admin.php file, you can use registerScriptFile

Check this out.