CODEWITHSUNDEEP
javascriptjquerypaginationinfinite-scroll
Karolis
Karolis

Reputation: 2618

Using server side pagination links for ajax infinite scroll

I have stubled upon a jquery plugin, which uses classical server-side pagination links to create "infinite scroll" pages.

http://infiniteajaxscroll.com

The idea looks nice and promissing, but I am interested what happens in this example:

Say I want to paginate a fairly acive page with 5-10 items added per minute. I show 50 items per page, 5 items in each row, newest items on top. A user comes to the website and the first page is loaded. He reads the information in the first page for a few minutes. During this time, another 12 items were added to the list.

As the user scrolls down, jquery plugin fires and preloads page 2. BUT 12 new items have been added during this time, so user ends up with one the following options:

The first case is not acceptable so let's assume we detect duplicates and remove them dynamically. In this case my grid gets ugly, as I am listing 5 items in each row, and 12 have just been removed from the usual feed of 50 items. So the last page contains 38 items, which means the last row is half full.

Needless to say, if I had a really active site, and 50 new items were added during the reading period, then the 2nd page would inject zero results.

The question... is there a way to fix the above mentioned side effects?

thanks!

Upvotes: 0

Views: 739

Answers (1)

2bigpigs
2bigpigs

Reputation: 462

Keep track of the ID of the mostRecent and leastRecent feed item you've loaded in a JS variable.

Whenever you make a request, send both these IDs to the server.

  • If you're loading less recent feed items, Make the server return those with ID < leastRecent

  • If you're loading more recent feed items, Make the server return those with ID > mostRecent

  • Update your variables based on the response of the server.

More implementation details:

If your initial data isn't fetched using AJAX, You can easily initialize the value of the JS variable by embedding a JS script. something like

<script> 
    var infiniteScroll_ID = {
        mostRecent: <?=$ID_of_mostRecent ?>, 
        leastRecent = <?= $ID_of_leastRecent ?> 
    }
</script> `

Else, Just initialize them to + and - infinity.

Upvotes: 1

Related Questions