Creating AJAX Pagination WITHOUT The Pages

You may have noticed some changes in the way a few websites work.  For example, if you go to Google Images and do a search, there is no pagination (1, 2, 3, Next, Previous) anymore.  Instead Google loads the images as you need them, e.g. when you scroll down. If you’re looking for more Node.js tutorial I’ve compiled an incredible list that will take you from a Node.js beginner to expert.

Another example is Facebook’s newsfeed.  I read an excellent article a few months back on their developer blog about this design decision.  By default, Facebook will only load a “full screen” of information with minimal scrolling which triggers a Javascript event.  However, as soon as you start scrolling they begin to fetch and display more content.  In the article, Facebook described this decision as a bandwidth saver.  They found that a lot of people would navigate away from the newsfeed before ever scrolling down or only looking at the top content.  By only showing 10-15 posts, they can keep the size of their newsfeed down oppose to loading 30+ posts that are never going to be read!  File size can easily go down 100s of KBs per page view and when you’re talking about millions of page views per second, that’s a significant number.

So, where do we begin?  First we need our basic listing page that does the following:

1. Fetches dynamic data.  This can be from a database, RSS, etc…
2. Loops through the content.
3. Builds the dynamic output.
4. Limits the data to 10 or 15 rows.  This can be less if the content is large.  Basically we want enough information so the average user will see scrollbars and enough content for them to scroll down before we fetch our new content.

The next step in our process is to get a Javascript library to help with the some of the key processes.  My favorite is Jquery.  Download and include the file in our listing page.

The example below will create an array, if you’re looking for information about JavaScript arrays I’ve compile an entire page dedicated with over 10 different examples that will considerably improve your skills with Javascript arrays.

Now we need to detect when the user starts scrolling.  Luckily for us, Jquery contains just such a function: http://api.jquery.com/scroll/

Below is some sample code that we can implement to test if it is working correctly:

[code]
<script type=”text/javascript”>
$(window).scroll(function () {
alert(‘scrolling’);
});
</script>
[/code]

Reload your page and scroll down.  Do you get several annoying alerts?  Perfect, we are making some progress.  Next we need to alter this code to perform an AJAX query and append our content.

[code]
<script type=”text/javascript”>
$(window).scroll(function () {
$.get(‘<my_news_feed>’, function(data) {
$(‘#newsfeed’).append(data);
});
});
</script>
[/code]

Be sure to replace “<my_news_feed>” with your URL that contains the next page of content.  You will also need to replace “#newsfeed” if this is not the id that contains your listings.  Reload your page and try scrolling again.

Uh oh, that doesn’t look too good, it appears our AJAX call is happening too many times!  Let’s alter our code to include a global Javascript variable that we will check to only perform this process once:

[code]
<script type=”text/javascript”>
var hasLoaded = false;
$(window).scroll(function () {
if (!hasLoaded) {
$.get(‘<my_news_feed>’, function(data) {
$(‘#newsfeed’).append(data);
});
hasLoaded = true;
}
});
</script>
[/code]

That’s better, now it only happens once.  I hope you are well on your way to implementing this into your website.  This article was more to cover the theoritical process of implementing this into our website.  Look for a full CakePHP example in a future article.

Enjoy!