Di solito in una pagina web quando abbiamo bisogno di mostrare tanti dati usiamo delle tabelle. I dati possono essere ricavati da un database o stare direttamente all'interno dell'HTML.
Nel caso stiano in un database, le tipiche modalità di richiamare quei dati sono o chiamare una pagina PHP direttamente o chiamarla via AJAX
PHP Scenario - HTML Code:
<table id="my-data">
<tr>
<th class="name"><a href="index.php?sort=name">Name</a></th>
<th class="date"><a href="index.php?sort=date">Date</a></th>
</tr>
...
</table>
In questo caso sto chiamando una pagina php ogni volta che premo sul titolo di una colonna inviando un parametro in GET che indica il campo su cui ordinare i dati cn SQL (ORDER BY). In questo scenario ogni volta viene ricaricata l'intera pagina
AJAX Scenario - Javascript Code:
$(document).ready(function() {
$('#my-data .name a').click(function() {
$('#my-data').load('index.php?sort=name&type=ajax');
return false;
});
$('#my-data .date a').click(function() {
$('#my-data').load('index.php?sort=date&type=ajax');
return false;
});
});
Aggiungendo questo semplice codice javascript sto mettendo in atto quello che si chiama progressive enhancement, cioè sto aggiungendo una funzionalità alla mia pagina. Nel caso il browser supporti javascript verrà eseguito, altrimenti verrà eseguito il normale codice html i cui link puntano ad una pagina PHP