Lazy Loading

Hi there.

This is my first question here and need your help. I did search a lot but couldn’t find anything useful to me. I wanna to know how can i “replace” my pagination system that actually is like:




$query = new Query;

$provider = new ActiveDataProvider([

    'query' => $query->from('users'),

    'pagination' => [

        'pageSize' => 10,

    ],

]);


// get the posts in the current page

$people = $provider->getModels();


echo \yii\widgets\LinkPager::widget([

	'pagination'=>$provider->pagination,

]);



instead the above code, i wand a way to build a Lazy loading system, like toddmotto.com/labs/echo/ . Not sure if i was clear enough, but what i want is to replace the pagination way of view for a one that loads the missing elements (users with pics in that case) on scroll.

If i were using basic html/jquery i would do it easily, but yii2 has some features that i would like to use, even if only the architecture. Sry for my english, was i clear enough? Just let me know if you have any doubts and i will try to explain it better. Thanks!

There’s nothing built-in for it. Either look for “infinite scroll” extensions or write some JS/CSS.

Thanks for your reply. Btw, i was not looking for a built in solution, i would to know what to know (or how to) using javascript or anything else. Btw i found the extension Yii2-scroll-pager, that does it.

Answering my own question, what i needed was:

A proper listView configured with a valid DataProvider and a specific view for the items that would be paginated. I’ll show you next:




//Controller

        $query = new Query;

	$provider = new ActiveDataProvider([

	    'query' => $query->from('users'),

	    'pagination' => [

	        'pageSize' => 4, //number of elements to load

	    ],

	]);

	

	// get the users in the current page

	$people = $provider->getModels();

		

    	return $this->render('index',[

        	'model' 	=> new FindPeople(),

        	'people'	=> $people,

        	'provider' 	=> $provider 

        ]);






//View file

    echo ListView::widget([

     'dataProvider' => $provider,

     'itemOptions' => ['class' => 'item'],

     'itemView' => '_view',

     'pager' => ['class' => \kop\y2sp\ScrollPager::className()]

	]);






//my file _view.php

<div class="item col-sm-6 col-md-3">

	<div class="thumbnail">

	  <img class="img-responsive" data-src="holder.js/300x300" src="<?= $model['photo'] ?>" alt="<?= $model['name'] ?>">

	  <div class="caption">

	    <h3><?= $model['name'] ?></h3>

	    <p>...</p>

	    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

	  </div>

	</div>

</div>



Sry if my question was hard to understand, but thank you very much for the reply. That’s my solution, that could help somebody else. C ya