Ce texte est une des traductions d'une série d'articles de Lorenzo Alberton
Suite de PEAR::Pager tuto : Navigation avec pagination et Javascript simple
Comme vous avez pu le voir,
the trick was setting the path parameter to an empty string
and the fileName parameter to a javascript link,
avec l'habituel marqueur "%s" pour le pageID.
Exemple #2: On veut de l'AJAX! On veut de l'AJAX!
Ok, maintenant que vous avez vu les bases, vous devriez avoir tous les éléments à aller plus loin.
Mais si vous êtes paresseux et voulez le voir quand même,
voici un exemple sur la façon de faire la même chose que ce que nous avons vu avant,
cette fois utilisant des appels AJAX chercher seulement les données utiles pour la page montrée.
Dans cet exemple, j'utilise la librairie PEAR::HTML_AJAX (docs):
Si vous ne pouvez pas attendre voyez cette démo,
c'est l'exemple en fonctionnement, regardons comment il est fait :
1) Le fichier html:
nous incluons les fichiers js dynamiques (server.php) pour traiter les demandes AJAX,
et appellons HTML_AJAX.replace ("target","testdata.php"),
ce qui remplacera le contenu du DIV cible par le rendu du script testdata.php en utilisant un appel d'AJAX.
<html>
<body>
<h1>PEAR::Pager exemple avec AJAX</h1>
<script type="text/javascript" src="server.php?client=all"></script>
<div id="target">Je suis la cible</div>
<script type="text/javascript">
HTML_AJAX.replace('target', 'testdata.php');
</script>
</body>
</html>
2) Le fichier testdata.php:
c'est un simple script php qui récupère les données que vous désirez afficher (Dais cet exemple, 100 entiers)
et les renvoie au Paginateur.
L'output de ce script remplacera le contenu du DIV cible dans le premier fichier html.
Nous affichons également la date et l'heure courante pour
nous prouver que les données sont « fraîches »
et construites à chaque appel
(c.-à-d. chaque fois que vous cliquez sur un lien de navigation).
<?php
require_once 'Pager.php';
$data = range(1, 100); //un tableau de données à paginer
$pager_params = array(
'mode' => 'Sliding',
'append' => false, //ne pas ajouter les paramètres GET
'path' => '',
'fileName' => 'javascript:HTML_AJAX.replace(\'target\',\'testdata.php?pageID=%d\');', //Pager replaces "%d" with the page number...
'perPage' => 10, //afficher 10 item par page
'delta' => 1,
'itemData' => $data,
);
$pager = & Pager::factory($pager_params);
$n_pages = $pager->numPages();
$links = $pager->getLinks();
echo '<p>Ce containeur est rempli avec un appel AJAX</p>';
echo '<p><span class="datetime">DateTime: '. date('Y-m-d H:i:s') .'</span></p>';
echo '<h3>Page '. $pager->getCurrentPageId() .'</h3>';
foreach ($pager->getPageData() as $item) {
echo 'Item '. $item .'<br />';
}
echo '<hr />'.$pager->links;
?>
3) Finallement, le fichier server.php :
nous créons une instance de HTML_AJAX_Server pour livrer les les deux les bibliothèques de Javascript et pour traiter les demandes d'AJAX des navigateurs.
<?php
include 'HTML/AJAX/Server.php';
$server = new HTML_AJAX_Server();
$server->handleRequest();
?>
-
-![[T]](http://static.technorati.com/pix/icn-talkbubble.gif)
