Scroll Down pagination with real time data - PHP

Question

I created a scroll down pagination using php and jquery and it work.

My problem is: We suppose that we have 20 data and we are in the first page(10 data per page), the user want display the second page, in this moment 3 new data has been created and added in database.

So the result of second page will be different and some data in the first page will display again.

How can I figure that?

Answer 1

Let the user decide

Most infinite scrolling sites (which render more content as you scroll down like in your question) are sorted chronologically, which means new content will only be added to the start or end of the list. Now, content appended to the end of results is no concern in most cases, so the main problem here is displaying items that should appear before the items already displayed.

(As a side note, I'm not dealing with content that should appear in-between already displayed results, as throwing off the order of items dynamically is a user experience nightmare and should be avoided if possible.)

To deal with this, the easiest way is to simply continue fetching from the ID of the last displayed item as you scroll down. If new data is added to the dataset acted upon, I would suggest displaying some form of notification or banner telling the user new content is available and only load new content / reload the page if the user clicks on that.

The reason for this is that new data created while the user was already acting upon the dataset may not be relevant to what the user is currently doing. For example, if the user just wants to update N of the records already displayed, the application should just let them finish what they are doing instead of automatically injecting items to the list and possibly messing with the current workflow.

To recap:

• if data is added to the end of the set: nothing to do, continue loading content dynamically.
• if data is added to the beginning of the set: continue loading content from where you left off but display a notification that can load the new data.
• if data is added to the middle of the set: same as above, continue loading and notify the user. Also, avoid this scenario if possible.

Some pseudocode for illustration

Assuming you have infinite scroll working on your site and most of this is implemented already.

$dataList.on('scroll', function() {

    var newData = false;

    if (endOfPage) {

        $dataList.append(getNextInList())

        newData = checkForNewData();

        if (newData) {

            newDataNotification();
        }
    }
});