Hello!
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!
Hi,
in the Model : Utilisateur.php
public function search()
{
$criteria=new CDbCriteria;
$criteria->compare('UserID',$this->UserID);
$criteria->compare('Login',$this->Login,true);
$criteria->compare('UserName', $this->UserName, true);
$criteria->limit = 25;
return new CActiveDataProvider(get_class($this), array(
'pagination'=>false,
'criteria'=>$criteria,
));
}
in the Controlleur : UtilisateurControlleur.php :
public function actionAdmin()
{
$model=new Utilisateur;
$model->unsetAttributes();
$UtilisateurData = Yii::app()->request->getQuery('Utilisateur');
if($UtilisateurData !== null)
$model->attributes = $UtilisateurData;
$this->render('admin',array(
'model'=>$model,
));
}
public function actionSelectMore()
{
$models = Utilisateur::model()->findAllBySql("SELECT * FROM Utilisateur LIMIT ".$_GET['offset'].",5");
$tab = array();
foreach($models as $model){
$tab[] = $model->getAttributes();
}
print(json_encode($tab));
}
in the View : Admin.php
<?php
$this->widget('zii.widgets.grid.CGridView', array(
'id'=>'utilisateur-grid',
'dataProvider'=>$model->search(),
'filter'=>$model,
'columns'=>array(
'UserID',
'Login',
'UserName',
array(
'class'=>'CButtonColumn',
'deleteButtonImageUrl'=>'images/delete.png',
'updateButtonImageUrl'=>'images/update.png',
'viewButtonImageUrl'=>'images/view.png',
),
),
'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");
elem.scroll(function(){
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight() - 1){
if (killScroll == false) {
killScroll = true;
$.ajax({
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){
if(data.length){
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&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&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&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) this.style.height = "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 ?
Hi,
you can call the JS file in the admin.php file, you can use registerScriptFile
Check this out.