Categorie
Bootstrap Programmazione Web

Paginazione avanzata con Bootstrap

Tra i numerosi componenti di Bootstrap possiamo trovarne uno per costruire un blocco di indici di pagina per implementare una paginazione. Tipicamente questo componente viene utilizzato quando si ha una lista di elementi che, per una ragione o per un’altra, non possono essere mostrati tutti in una singola pagina. In questo caso, come avviene per i motori di ricerca, vengono create più pagine con lo stesso template ma ognuna con elementi diversi, ordinati secondo qualche criterio.

La pagina di documentazione del componente Pagination presenta la versione base di questo strumento e alcune varianti, senza codice Javascript per permettere ai pulsanti di funzionare.

Nel caso in cui dobbiamo ricorrere alla paginazione per poche pagine, ciò basta.
In molti altri casi invece è necessario porre rimedio al problema che il numero di pagine è troppo grande per mostrare tutti i numeri nell’interfaccia utente.

Avendo riscontrato questo problema ho implementato un semplice algoritmo che permetta di “collassare” parte degli indici di pagina non necessari. Il risultato è mostrato immediatamente qui sotto.

See the Pen Advanced Pagination in Bootstrap by Lorenzo Vainigli (@lorenzovngl) on CodePen.

Questo algoritmo utilizza tre variabili:

  • Count; numero totale delle pagine da elencare.
  • Range: numero di indici che devono essere mostrati a destra e a sinistra della pagina corrente.
  • Page: pagina corrente, quella che l’utente sta visualizzando.

Codice Javascript

let count = 50;
let range = 3;
let page = 15;

if (page > 1){
  $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + (page-1) + '">Previous</a></li>');
}
for (let i = 1; i <= count; i++){
  if (i == 1 && page-range > 1){
    $('.pagination').append('<li class="page-item"><a class="page-link" href="./1">1</a></li>');
      if (page-range > 2){
        $('.pagination').append('<li class="page-item disabled"><a class="page-link" href="#">...</a></li>');
    }
  }
  if (i >= page-range && i <= page+range){
    if (i != page){
      $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + i + '">' + i + '</a></li>');
    } else {
      $('.pagination').append('<li class="page-item active"><a class="page-link" href=""./' + i + '"">' + i + '</a></li>');
    }
  }
  if (i == count && page+range < count){
    if (page+range < count-1){
      $('.pagination').append('<li class="page-item disabled"><a class="page-link" href="#">...</a></li>');
    }
    $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + count + '">' + count + '</a></li>'); 
  }
}
if (page < count){
  $('.pagination').append('<li class="page-item"><a class="page-link" href="./' + (page+1) + '">Next</a></li>');
}

Codice PHP

$count = 50;
$range = 3;
$page = 15;

if ($page > 1){
  echo '<li class="page-item"><a class="page-link" href="./'.($page-1).'">Previous</a></li>';
}
for ($i=1; $i<=$count; $i++){
  if ($i == 1 && $page-$range > 1){
    echo '<li class="page-item"><a class="page-link" href="./1">1</a></li>';
    if ($page-$range > 2){
      echo '<li class="page-item disabled"><a class="page-link" href="#">...</a></li>';
    }
  }
  if ($i >= $page-$range && $i <= $page+$range){
    if ($i != $page){
      echo '<li class="page-item"><a class="page-link" href="./'.$i.'">'.$i.'</a></li>';
    } else {
      echo '<li class="page-item active"><a class="page-link" href=""./'.$i.'"">'.$i.'</a></li>';
    }
  }
  if ($i == $count && $page+$range < $count){
    if ($page+$range < $count-1){
      echo '<li class="page-item disabled"><a class="page-link" href="#">...</a></li>';
    }
    echo '<li class="page-item"><a class="page-link" href="./'.$count.'">'.$count.'</a></li>';
  }
}
if ($page < $count){
  echo '<li class="page-item"><a class="page-link" href="./'.($page+1).'">Successiva</a></li>';
}

Dipendenze (Bootstrap 4.0.0)

CSS

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

Javascript

https://code.jquery.com/jquery-3.2.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js

Categorie
Programmazione Web

Disabilitare Google Analytics solo per gli amministratori di un sito

I servizi per tracciare i visitatori che visualizzano il proprio sito, come Google Analytics, sono strumenti fondamentali per avere un’idea delle performance delle proprie pagine web.

Il problema che sorge è che gli amministratori, creatori di contenuti o qualsiasi altro profilo che gestisce i contenuti di un sito risultano tra gli utenti più attivi. Sul lungo periodo questa attività, che Analytics cataloga come “visitatore”, senza fare distinzione tra utenti e amministratori, va a falsificare i numeri degli utenti reali, cioè quelli che non hanno nessun interesse nella crescita o decrescita dei numeri di un sito.

Questo fatto è molto importante, soprattutto se poi i numeri dei visitatori devono essere la base per la scelta di strategie di marketing.

Come fare?

Utilizzare i cookie

Per tracciare i visitatori Analytics utilizza un breve codice Javascript come questo, presente in ogni singola pagina del sito che il browser di ogni visitatore esegue:

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-X');

Molto semplicemente, possiamo definire un cookie da impostare nel browser degli amministratori (per esempio no-tracking) e, con un comando condizionale, dire al codice di eseguire le istruzioni precedenti solo se il cookie non è presente. Il valore del cookie quindi non è rilevante.

// indexOf(str) restituisce -1 se la stringa str non è presente,
// l'indice della prima occorrenza di str altrimenti
if (document.cookie.indexOf("no-tracking") === -1){
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-XXXXXXXX-X');
}

Il cookie può essere impostato anche manualmente nel browser degli amministratori.

Effettuata questa operazione, Google Analytics traccerà solo gli utenti reali che visiteranno il sito, rendendo molto più affidabili i dati raccolti.