Categorie
CSS JQuery PHP

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.

CSS

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.

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.

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

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.

Live Demo

live demo

11 risposte su “Paginazione stile Facebook”

Scusa ma mi sto scervellando. Nella PaginationClass se volessi recuperare la variabile presente in una query (tipo pagina.php?id=10 dove 10 è la variabile) come la recupero dal database?

Ho provato con $query = “SELECT * FROM messages WHERE id > ‘$lastmsg’ AND uid = ‘$VARIABILE’

ma non funziona!
Ti prego di un aiuto
Grazie

Aggiungo che ho effettuato le seguenti modifiche:

if(isset($_POST[‘lastmsg’]) && is_numeric($_POST[‘lastmsg’]) && isset($_POST[‘profileid’]))
{
$lastmsg = $_POST[‘lastmsg’];
$VARIABILE = $_POST[‘VARIABILE’];
$pagination = new Pagination();
$lastmsg = $pagination->printMessages($lastmsg,$profileid);
$pagination->printMoreBox($lastmsg,$profileid);

}

e

$(function() {
$(‘.load_more’).live(“click”,function() {
var last_msg_id = $(this).attr(“id”);
var profileid = “”;
if(last_msg_id!=’end’){
$.ajax({
type: “POST”,
url: “wall_more.php”,
data: “lastmsg=”+ last_msg_id +”&VARIABILE=”+ VARIABILE,
beforeSend: function() {
$(‘a.load_more’).append(”);
},
success: function(html){
$(“.mci_pag_style”).remove();
$(“#profile_pagination”).append(html);
}
});
}
return false;
});
});

Non so se ho capito bene, vorresti restringere ulteriormente la query con un parametro, eventualmente, passato via querystring tipo index.php?uid=a (dove index.php è la prima pagina)
Ci sono vari modi per ottenere il risultato, il più semplice e veloce che mi viene in mente è usare le sessioni del server. Fai le seguenti modifiche al mio script:
fai iniziare le pagine index.php ed ajax_more.php con:

poi modifica il metodo getMessages() così:

Ti ringrazio. Io però devo recuperare i dati da un _GET e non da un _SESSION comunque ho modificato lo script così e sembra funzionare.

if (NULL === $this->_messages) {
$queryExtended = isset($_GET[‘uid’]) ? “AND uid = ‘{$_GET[‘uid’]}'” : “”;
$query = “SELECT * FROM messages WHERE message_id > ‘$lastmsg’ $queryExtended ORDER BY message_id ASC LIMIT ” . self::MESSAGES_FOR_PAGE;
$this->_messages = mysqli_query($this->_dbc,$query);
}

Hai ragione, mi ero dimenticato di postarti una riga. Nell’index.php devi aggiungere anche:

Così ad occhio, con il tuo script hai bisogno di passare il parametro via GET anche con la chiamata AJAX, si può fare ma è una complicazione.

Effettivamente se metto DESC LIMIT si scompagina tutto. Anzitutto non considera più il filtro $_GET[‘id’] impostato e poi gli id non vanno in ordine decrescente, ma al cambio pagina non riparte in maniera sequenziale (l’id non è ad esempio 3 -> 2 -> 1 ma 3 -> 2-> 3).

Se vuoi fare l’ordinamento discendente allora nella pagina iniziale devi passare al costruttore ed al metodo printMessages() l’ID dellultimo record (che recuperi tramite query) oppure se non ti vuoi rompere le scatole (ma è poco professinale) un valore molto alto tipo:

poi cambi il segno della query da > a <:

Riprendo il tuo post:

Così ad occhio, con il tuo script hai bisogno di passare il parametro via GET anche con la chiamata AJAX…

Intendi che in ajax_more dovrei aggiungere una variabile? Ma il metodo utilizzato lì non è POST?

Se fai quello che ho scritto, cioè lo assegni subito ad un sessione, eviti di sbatterti troppo. Altrimenti devi gestire il passaggio di quel filtro anche sul JavaScript.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.