Paginazione stile Facebook

16 Ott

Out Of Date Warning

Questo post è stato pubblicato più di 2 anni fa (il 16 ottobre 2011). Le idee vanno avanti velocemente, le prospettive cambiano quindi i contenuti potrebbero non essere aggiornati. Ti prego di tenere in considerazione questo, e di verificare le informazioni tecniche presenti nell'articolo prima di farne affidamento per i tuoi scopi.

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 Commenti su “Paginazione stile Facebook”

  1. Marcello 8 ottobre 2012 at 18:05 #

    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

    • Marcello 8 ottobre 2012 at 18:39 #

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

      • grimax 8 ottobre 2012 at 20:24 #

        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ì:

        • Marcello 9 ottobre 2012 at 07:13 #

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

  2. grimax 9 ottobre 2012 at 07:24 #

    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.

    • Marcello 9 ottobre 2012 at 13:16 #

      Grazie.
      Un’ultima domanda. Ma il sistema funziona correttamente solo con ORDER ASC? Perchè se provo a mettere DESC ricomincia dall’inizio.

  3. Marcello 9 ottobre 2012 at 17:51 #

    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).

  4. grimax 9 ottobre 2012 at 20:41 #

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

  5. Marcello 10 ottobre 2012 at 14:20 #

    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?

    • grimax 10 ottobre 2012 at 15:03 #

      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