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="http://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 "
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); } ?>