jQuery: infinite scroll con php e mysql

Sulla scorta dell’esempio precedente vediamo come renderlo dinamico con php e mysql.

La prima operazione sarà quindi allestire una pagina php che interroghi una tabella del database gestendo la paginazione in modo classico.

<?php
error_reporting(0);
require('include/mysql.inc.php');
$out='';
$page=1;if(isset($_GET['page'])){$page=$_GET['page'];}
$page=filter_var($page,FILTER_SANITIZE_NUMBER_INT);
$sql='select count(sigla) from province where 1';
$fetch=mysql_query($sql);
$row=mysql_fetch_row($fetch);
$totale=$row[0];
$perpage=20;
$pagine=ceil($totale/$perpage);
if($page>$pagine){$page=$pagine;}
if($page==0){$page=1;}
$primo=($page-1)*$perpage;
$sql='select sigla, nome from province where 1 order by nome limit '.$primo.','.$perpage.'';
$fetch=mysql_query($sql);
while($row=mysql_fetch_array($fetch, MYSQL_ASSOC)){
$out.='<div><h1>'.$row['sigla'].' - '.$row['nome'].'</h1></div>';
}
mysql_close($conn);
if($page<$pagine){$out.='<nav id="page-nav"><a href="lista-prov.php?page='.($page+1).'"></a></nav>';}
echo $out;
?>

I punti centrali sono il passaggio di una variabile page in GET, lettura e santize della variabile; paginazione dei record (classica); stampa del codice html da iniettare nella pagina e infine, se non siamo all’ultima pagina, aggiunta del link alla chiamata successiva.

Non resta che apportare le modifiche necessarie alla pagina di visualizzazione:

la prima questione riguarda la chiamata iniziale per presentare i dati al caricamento, via ajax, attenzione all’async:false altrimenti il nostro plugnis non riesce a fare il bind per la seconda chiamata

$(function(){
$.ajax({
url:'lista-prov.php',
type:'GET',
async:false,
success: function(str){
$('#container').html(str);
}
})

...

Il resto del codice resterà inalterato rispetto all’esempio precedente

La pagina in opera