Creating AJAX Pagination WITHOUT The Pages

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