Paginazione stile Twitter

Nell’articolo precedente abbiamo visto, come sia relativamente semplice creare un effetto di paginazione in stile Facebook. Adesso sfruttando quasi interamente quel codice, andremo a simulare la paginazione di Twitter.
Per completezza metto anche in questo post il codice completo, anche se, apparte la sezione dei CSS, una minima parte dello script JQuery ed il metodo printMoreBox() del file paginationClass.php nulla è cambiato. Per quanto riguarda invece la spiegazione rimando al post precedente Paginazione in stile Facebook.

Database

CREATE TABLE `messages` (
  `message_id` int(10) NOT NULL AUTO_INCREMENT,
  `message` text,
  PRIMARY KEY (`message_id`)
);

CSS

* {
    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;
        text-align: left;          
}
#container a {
	color:#2276BB;
	text-decoration:none;
}
.load_more {
	background-color:#FFFFFF;
	background-image:url("more.gif");
	background-position:left top;
	background-repeat:repeat-x;
	border-color:#DDDDDD #AAAAAA #AAAAAA #DDDDDD;
	border-style:solid;
	border-width:1px;
	display:block;
	font-size:14px;
	font-weight:bold;
	height:22px;
	line-height:1.5em;
	margin-bottom:6px;
	outline:medium none;
	padding:6px 0;
	text-align:center;
	text-shadow:1px 1px 1px #FFFFFF;
	width:100%;
}
.load_more {
	-moz-border-radius:5px 5px 5px 5px;
}
.load_more:hover {
	background-position:left -78px;
	border:1px solid #BBBBBB;
	text-decoration:none;
}
.load_more:active {
	background-position:left -38px;
	color:#666666;
}
img {
	border : none;
}

JQuery

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
$(function() {
    $('.load_more').live("click",function() {
        var last_msg_id = $(this).attr("id");
        if(last_msg_id!='end'){
            $.ajax({
                type: "POST",
                url: "ajax_more.php",
                data: "lastmsg="+ last_msg_id, 
                beforeSend:  function() {
                $('a.load_more').html('');
            },
            success: function(html){
                $("#more").remove();
                $("ol#updates").append(html);
            }
        });
    }
return false;
    });
});

PHP

paginationClass.php:

 <?php
class Pagination
{
    const MESSAGES_FOR_PAGE = 12;
    
    protected $_messages = NULL;
    protected $_dbc = NULL;
    
    public function __construct()   
    {
        /* Definisco le costanti per connessione al DB */
        DEFINE('DATABASE_USER', 'username');
        DEFINE('DATABASE_PASSWORD', 'password');
        DEFINE('DATABASE_HOST', 'localhost');
        DEFINE('DATABASE_NAME', 'messages');
        
        // Connesxsion al DB:
        $this->_dbc = @mysqli_connect(DATABASE_HOST, DATABASE_USER, DATABASE_PASSWORD, 
                DATABASE_NAME);

        if (!$this->_dbc) {
            throw new Exception('Non posso connettermi al DB');
        }             
    }
    

    /**
     * Getter dei messaggi dal database
     *
     * @param int $lastmsg l'id dell'ultimo messaggio
     * @return array
     */
    public function getMessages($lastmsg = 0)
    {
        if (NULL === $this->_messages) {
            $query = "SELECT * FROM messages WHERE message_id > '$lastmsg' ORDER BY message_id ASC LIMIT " . self::MESSAGES_FOR_PAGE;
            $this->_messages = mysqli_query($this->_dbc,$query);
        }
        
        return $this->_messages;
    }
    
    /**
     * Stampa i messaggi e restituisce l'id dell'ultimo messaggio
     * 
     * @param int $lastmsg l'id dell'ultimo messaggio
     * @return mixed
     */
    public function printMessages($lastmsg = 0)
    {
        while($row=mysqli_fetch_array($this->getMessages($lastmsg),MYSQLI_ASSOC))
        { 
            $msg_id  = $row['message_id'];
            $message = $row['message'];
            
            echo "
$message
";    
        }

        return isset ($msg_id) ? $msg_id : 'end';
              
    }
    
    /**
     * Stampa a video il box per visualizzare in nuovi messaggi.
     * 
     * @param int $lastmsg l'id dell'ultimo messaggio
     */
    public function printMoreBox($lastmsg)
    {
        if( mysqli_num_rows($this->getMessages()) == self::MESSAGES_FOR_PAGE) {
            echo '
More
';
        } else {   
            echo '
Fine
';  
        }    
    }  
}
?>

index.php:

<?php
include('paginationClass.php');
?>
<?php
try {
?> 
<ol class="row" id="updates">
<?php
$pagination = new Pagination();
$lastmsg = $pagination->printMessages();
?>
</ol>
<?php 
$pagination->printMoreBox($lastmsg);   
} catch (Exception $exc) {
    echo $exc->getMessage();
}
?>

ajax_more.php:

<?php
include('paginationClass.php');

if(isset($_POST['lastmsg']) &&is_numeric($_POST['lastmsg']))
{
    $lastmsg    = $_POST['lastmsg'];
    $pagination = new Pagination();
    $lastmsg    = $pagination->printMessages($lastmsg);
    $pagination->printMoreBox($lastmsg);
}
?>

Live Demo