L’exemple dans ce post propose une solution pour paginer une table HTML directement en Javascript/Jquery.
L’idée c’est charger l’ensemble des lignes en une seule requête. Ensuite c’est les fonctions Javascript qui affiche/masque les lignes en fonction de la pagination.
Tout se passe coté navigateur.
Il existe de nombreuses api sur Internet qui réalise ce genre de traitement. Comme toujours mon but étant l’apprentissage, je me suis imposer de créer une api qui est intégrée dans mon framework maison MyMVC.
Prérequis
- Une table HTML avec un TBODY et un ID associé
- Toute les lignes (TR) à paginer devront être dans le TBODY
- 2 boutons pour ‘Page suivante’ et ‘Page précédente’
- Jquery
Init de la pagination
On utilise ici la classe MyMVC_Pagination
MyMVC_Pagination.init( 'myTbody' , // id du tbody de la table 10 , // nb lignes par page 'idBtNext' , // id du bouton page suivante 'idBtPrevious', // id du bouton page précédente true|false , // masquage auto des boutons ? callbackFunc // fonction callback appelée à chaque changement de page );
NB : La fonction callback reçoit en entrée les paramètres : nbPages , currentPage, firstLine, lastLine
Exemple de code HTML
<table>
<tr>
<td>N°</td>
<td>Nom</td>
<td>Email</td>
</tr>
<!-- section TBODY -->
<tbody id="idTBody">
<tr>
<td>1</td>
<td>Paul</td>
<td>paul@fff.com</td>
</tr>
<tr>
<td>2</td>
<td>Marc</td>
<td>marc@fff.com</td>
</tr>
<tr>
<td>3</td>
<td>fabienne</td>
<td>fabienne@fff.com</td>
</tr>
.....
</tbody>
<!-- fin de section -->
</table>
<button id="bt_previousPage">Page -1</button>
<button id="bt_nextPage">Page +1</button>
</table>
Pour le code HTML ci-dessus, l’init de la pagination se ferait avec : MyMVC_Pagination.init('idTbody',10,'bt_nextPage','bt_previousPage',true,updateFooterPage)
La fonction de callback permet de mettre à jour le footer avec la mention : Page x / y
function updateFooterPage(_nbPage, _currentPage, _first, _last) {
$("footerPage").html(
"Page "+_currentPage+"/"+_nbPage
);
}