Paging is a method where you break a record set into multiple parts. Many of us with blogs and websites with multiple pages are used to the common “Prev Next Last” setup that allows us to navigate. If you want something a little more comprehensive, you might even break the records up and show some paging numbers as well like “Prev 4 5 6 7 8 Next Last”.

But that’s just not very cool is it? Twitter uses a system where you dont need to click next. The way that their content is delivered, the newest content is always at the top. Twitter might be a “micro blogging” system at heart, but this idea works with regular blog content as well. I have seen it in action on Tumblr and I have even implemented it on my own Opinion & Discussion website.

We will be using PHP and Jquery to create a similar system.

1: Lets start with setting up our initial data set.

We are just going to pull 25 records from MySql and drop them into a list.

<ul id="Results">
<?php
$getFirstList = mysql_query("SELECT * FROM tableName ORDER BY id DESC Limit 25");
 
while($listData = mysql_fetch_array($getFirstList)){
	echo "<li> Your Data goes Here! </li>";
	$lastId = $listData['id']; //just get keep the last ID of the set.
}
?>
</ul>

Above is a quick list and a simple way to grab the last ID of the result set, we are only getting 25 rows at a time right now so we dont need to be too complex.

2: The trigger.
We need a trigger to action the call for more results. I’m assuming that your 25 results will require the user to scroll to see them all, and with that in mind the trigger will be the final LI element in the list.
Before the closing UL tag, insert this:

<li id="more<?php echo $lastId; ?>" class="morebox">
	<span id="<?php echo $lastId; ?>" class="more"></span>
</li>

This list item will have the ID of the final result making it unique.

3: Ajax processing.
We need a page that will load our extra results. This is a simple PHP/MySql query based on the variables that we send it. Here is a simple example:

<?php
 
$lastId = $_POST['lastId']; 
 
$getMoreList = mysql_query("SELECT * FROM tableName WHERE id > '$listId' ORDER BY id DESC Limit 25");
 
while($listData = mysql_fetch_array($getMoreList)){
	echo "<li> Your Data goes Here! </li>";
	$lastId = $listData['id']; //again, just get keep the last ID of the set.
}
?>
<li id="more<?php echo $lastId; ?>" class="morebox">
	<span id="<?php echo $lastId; ?>" class="more"></span>
</li>

In this, we regenerate the trigger with a new ID.

4: jQuery to tie it all together.

There is only a few steps here so I wont break it down too much. This is what we are going to do:
1: Initiate the script when the document is ready (document.ready function)
2: We set the container variable to “window”, and begin the function by looking for a “scroll” action. jQuery makes this simple by using the .scroll() method.
3: Once we scroll, the ID of the trigger is set. If there is an ID then we can proceed.
4: We check the element’s position by using a custom function called belowFold(). This essentially checks to see if the trigger is NOT on the screen.
5: If it’s on the screen we continue by setting the trigger contents to show a loader.gif image. We then do a simple POST to the PHP document that will load our next set of results. The only data we need to post is the ID of the LAST list element in the first set.
6: If the post was successfull, we load the new LI elements into place and remove the previous used trigger.

Of cause if there is no ID, we set the trigger to be empty as there is no point loading nothing.

The extra belowFold() function.

$.belowFold = function(element,container) {
        if (container === undefined || container === window) {
            var pageFold = $(window).height() + $(window).scrollTop();
        } else {
            var pageFold = $(container).offset().top + $(container).height();
        }
        return pageFold <= $(element).offset().top;
    };

This is a simple funtion that just checks the height of the window against the position of the trigger.

Here is the complete jQuery function:

$(document).ready(function(){
 
	var container = window;
 
	$(container).scroll(function() { 
	var element = $(".morebox");  
	var ID = $('.more').attr("id");
		if(ID){		             
			if (!$.belowFold(element,container)) {
				$("#more"+ID).html('<img src="/images/loader.gif" />');
				$.post("/more.php", { lastmsg:  ID },
						   function(data){
							$("ul#Results").append(data);
							$("#more"+ID).remove();
						   });
				}
		}else{
			$(".morebox").html('');
		}
	});
 
$.belowFold = function(element,container) {
        if (container === undefined || container === window) {
            var pageFold = $(window).height() + $(window).scrollTop();
        } else {
            var pageFold = $(container).offset().top + $(container).height();
        }
        return pageFold <= $(element).offset().top;
    };
 
});

And thats it.

1 votes