An Alternative to Pagination : Facebook and Twitter Style

• Tweet

• Tweet

As your website grows,  it is no longer practical to display all the data at once on the same page. Moreover, the end user will probably be  interested with only part of the content. Also, loading all the content at once might increase the server load or simply a waste of bandwidth.  This is where pagination comes into play.

First,  I am not too sure how  you should call this thing that  you are going to learn about but its goal is similar to a usual pagination,  That is, to display partial content and to save bandwidth! This article is about how to create a similar stuff to twitter and Facebook’s way of displaying data.

If you have no idea what am talking about,  see the screenshot below:

Download Full Sourcode (Twitter + Facebook version ) || Facebook Style Demo | Twitter Style Demo

Hopefully ,i have refreshed your memory .Now let’s get into some coding ..

For the sake of simplicity , i’ll explain only the coding for the Facebook “flavour” only . The codes are basically the same for both, only the css style is changed in the twitter flavour .

CSS Codes

body {
 font-family:Arial, 'Helvetica', sans-serif;
 color:#000;
 font-size:15px;
}

a {
color:#2276BB;
text-decoration:none;
}

* {
 margin:0px;
 padding:0px
}
ol.row {
 list-style:none
}
ol.row li {
 position:relative;
 border-bottom:1px solid #EEEEEE;
 padding:8px;
}
ol.row li:hover {
 background-color:#F7F7F7;
}
ol.row li:first-child {
}
#container {
 margin-left:60px;
 width:580px
}

 img {
border : none ;
}

/* The most important  below  */
#facebook_style  {
border:1px solid #D8DFEA;
padding:10px 15px;
background-color:#EDEFF4;
}

#facebook_style a {
color:#3B5998;
cursor:pointer;
text-decoration:none;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:11px;
text-align:left;
}

The jQuery Part

The code below makes an ajax call to fetch more data and display it in a div .The code is self-explanatory. One  thing I would like to point out is about:

$('.load_more').live("click",function() {

Maybe  you are asking yourself why not simply:

$('.load_more').click(function() { 

If you try the second one , you will be able to load the data only once after your first click .No more data will be loaded after that . The .live method is an event delegation mechanism that allows you to manipulate the DOM .

$(function() {//When the dom is ready
$('.load_more').live("click",function() { //When user clicks
var last_msg_id = $(this).attr("id");//Get the id from the hyperlink
if(last_msg_id!='end'){ //if not all post has been loaded yet

$.ajax({//fetch the article via ajax
type:] "POST",
url: "facebook_style_ajax_more.php",//calling this page
data: "lastmsg="+ last_msg_id,
beforeSend:  function() { // add the loadng image
$('a.load_more').append('<img src="facebook_style_loader.gif" />');
 },
success: function(html){
$(".facebook_style").remove();//remove the div with class name "facebook_style"
$("ol#updates").append(html);//output the server response into ol#updates
}
});
 }
return false;
});
});

The Body Section

<div id='container'>
 <ol id="updates">
 <?php
$query ="select * from twitter ORDER BY msg_id ASC LIMIT 9";
$result = mysqli_query($dbc,$query);
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
 <li> <?php echo $message; ?> </li>
 <?php } ?>
 </ol>

 <div id="facebook_style">
 <a id="<?php echo $msg_id; ?>" href="#" >Show Older Posts <img src="arrow1.png" /> </a>
 </div>
</div>

Page being called via Ajax : facebook_style_ajax_more.php

 include('database_connection.php');

if(isset($_POST['lastmsg']) &&is_numeric($_POST['lastmsg']))//some validation to prevent sql injection
{
$lastmsg=$_POST['lastmsg']; //getting the row id of last msg displayed
$query="select * from twitter where msg_id>'$lastmsg' order by msg_id asc limit 9";
$result = mysqli_query($dbc,$query);
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li> <?php echo $message; ?> </li>
<?php
}

?>
<?php

if( mysqli_num_rows($result)==9){ //this if else statement "decides" whether end of page has reached or there's more data to load .
 ?>
<div id="facebook_style"> <a id="<?php echo $message; ?>" href="#" >Show Older Posts <img src="arrow1.png" /></a> </div>
<?php
 }else {

 echo '  <div  id="facebook_style">
 <a  id="end" href="#" >No More Posts</a>
 </div>';

 }
}

Credits

The animated loading images were generated from here and there And part of the CSS was taken directly from facebook and twitter’s page source code :) .

Summary

As you can see , it is   fairly simple to implement . Honestly , i could not find a reason why you should use this type of pagination instead of the usual one .I think it’s just a question of preference .One way you could improve it is by instead of loading more data when the user clicks ,make it load when the user is scrolling down  using Jquery’s .scroll .If you have any suggestion , critics drop me a comment below . That’s what it is used for :) .

Related Posts

1. Facebook and Google Plus style of introducing new features using jQuery
2. Create a facebook post to wall system using PHP and jQuery Part 2
3. Create a facebook post to wall system using PHP and jQuery Part 1
4. Username Availability Check in Registration Form using Jquery/PHP
5. Creating a Fancy Search Feature with PHP,Mysql and Jquery

Tagged as: Facebook, Jquery, Pagination, PHP, Twitter