Creating AJAX Pagination WITHOUT The Pages 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:


<script type="text/javascript">
$(window).scroll(function () {
alert('scrolling');
});
</script>

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.


<script type="text/javascript">
$(window).scroll(function () {
$.get('<my_news_feed>', function(data) {
$('#newsfeed').append(data);
});
});
</script>

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:


<script type="text/javascript">
var hasLoaded = false;
$(window).scroll(function () {
if (!hasLoaded) {
$.get('<my_news_feed>', function(data) {
$('#newsfeed').append(data);
});
hasLoaded = true;
}
});
</script>

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!

Published on Feb 21, 2011

Tags: AJAX | pagination | jQuery Tutorial

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.

Tutorials

Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.