Paginazione stile Facebook

Siti come Twitter o Facebook sempre all’avanguardia in fatto di tecnologia web utilizzano un effetto molto carino per visualizzare i propri risultati. Praticamente quello che vedremo è la nuova moda (ormai neanche più tanto nuova) riguardo alla paginazione dei risultati in ambiente web.
Vado a sfruttare l’effetto “real-time” che ci offre Ajax, servendomi anche di JQuery per visualizzare i vecchi risultati senza dover ricaricare la pagina, dando così un gradevole effetto di fluidità

Database

Per prima cosa ho bisogno di una base di dati che conterrà le informazioni da visualizzare. Nel mio esempio (MySQL) ho creato una semplice tabella (messages) con due campi: message_id (Auto Incrementante) e message che conterrà i dati da visualizzare.

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

CSS

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 ;
}
#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;
}

JQuery

Questa parte è molto importante. Al click sull’ancora con classe load_more prendiamo il valore del suo attributo id. Se questo è uguale ad end allora non facciamo niente (vuol dire che non ci sono ulteriori risultati), altrimenti lanciamo una chiamata AJAX alla pagina ajax_more.php passandole l’id dell’ultimo messaggio visualizzato.

<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').append('');
            },
            success: function(html){
                $(".facebook_style").remove();
                $("ol#updates").append(html);
            }
        });
    }
return false;
    });
});

Server Side (PHP)

Creiamo prima di tutto il file paginationClass.php che contiena la classe pagination, responsabile di gran parte del lavoro. Da notare che per brevità ho messo nel costruttore la parte di connessione al database. Abbiamo poi 2 metodi:

• getMessages() che restituisce i messaggi successivi a quello con massage_id uguale al parametro passatogli.
• printMoreBox() che stampa il box per la paginazione.

Infine con la costante MESSAGES_FOR_PAGE vado a settare il numero di risultati per pagina.

 <?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 '
 
                  
                  Mostra Posts piú vecchi 
';
        } else {   
            echo '

                  Fine
                  
';  
        }    
    }  
}
?>

Fatto questo poi è un gioco da ragazzi; basta includere paginationClass.php nelle nostre pagine, istanziare un oggetto e richiamarne i metodi. Vediamo:

<?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();
}
?>

Questa è infine la pagina ajax_more.php che sarà chiamata attarverso una richiesta AJAX. Da notare (come per la precedente) la semplicità e brevità del codice.

<?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