Zend pagination integrating with infinite scroll

hi does anyone know how to work with infinite scroll while using zend\paginator?

I’m using it in one of my e-commerce stores, but I’ve dropped the paginator when working with infinite scroll. It’s more light-weight - you don’t need neither pages, nor the count of all the items - you just load the next portion till the portion becomes empty and then you stop.

1 Like

could you please provide me a clear example to show me how I work with it?

Of course. Here’s the snippet of code where I use it (a little bit modified for simplicity):

As you scroll more and more, you increase the ?portions=X in your URL address with the Javascript’s History API and you make AJAX requests that will pass the ?portion=Y where Y is the next portion to be loaded.

Changing the URL address guarantees you that when the user refreshes the page, he/she will see as many items as there were when he/she stopped scrolling.

1 Like

I hope it will work tnx.

You’re welcome. If you have any further questions, I will be glad to help you.

1 Like

hi again, I’m actually trying to make an Ajax call to the server but could not do it!!! I’ve tried using scroll event but since there is problem base on Scroll-linked effects the Ajax didn’t work here is the code:

 function myFunction() {
 var scrollArea = document.getElementsByClassName('white-wrapper');
 var sHeight = scrollArea[0].clientHeight;
 var pageCounter = 1;
 function increasePage(){
 if(window.innerHeight + window.scrollY >= sHeight ) {
 history.replaceState({page : pageCounter}, "pageNumber",("/portfolio/page-" + pageCounter));
 var xmlHttp = new XMLHttpRequest();
 xmlHttp.onreadystatechange = function() {
 if (this.readyState == 4 && this.status == 200) {
 document.body.className = "";
 xmlHttp.open("POST", "http://msadd.local/ajax", true);
 document.body.className = "loading";
 xmlHttp.send("state = history.state");


how is it possible to make a simple ajax call in zf3???
I know I have to use zend-json and zend-view but is there any clean sample as a guidance!?!?!?!
besides how have you used scroll event?

You don’t need zend-view. All you need to do is send an XMLHttpRequest to an API endpoint or in this case a zend-mvc controller action. That action sends a json response back with the requested data. What that data looks like that’s up to you.

Some question that might help you:

  • What part doesn’t work?
  • You can’t send an Ajax request?
  • You don’t get a json response back?
  • Does the Ajax request work without the infinite scroll?
  • Why do you send a POST request and not a GET request? You are getting data from your endpoint, not pushing new data.
  • You only handle requests with status 200. I would add exception handling and non 200 status responses, at least for development and logging.
1 Like