Ce texte est une des traductions d'une série d'articles de Lorenzo Alberton

OK, vous ne pouvez pas résister à la tendance du Web 2.0 vous avez appris que tous que vous pourriez se renseigner sur cette « nouvelle » technologie appelée AJAX, et maintenant vous vous demandez comment vous pourriez vivre sans lui.

Tout le monde n'a pas sauté dans le mouvement, bien que, et beaucoup de bibliothèques existent toujours sans mettre en application ce dispositif, ainsi vous est confronté au dilemme :

Dois-je je continuer à employer que vieille bibliothèque et abandonner mes idées fraîches d'AJAX, ou devrais je mettre en application ma propre version ?

Si vous recherchez une classe de pagination avec ces conditions, je suis heureux de vous rassurer au sujet de PEAR::Pager : il est AJAX-ready, et a été depuis il y a longtemps.

garanti 100% buzzword-compliance !

Example #1 - Pagination et Javascript

D'abord, regardons un exemple simple sur la façon d'armer le paginateur pour créer des liens de Javascript.

Dans cet exemple plutôt simpliste, nous récupérons toutes les données dans les morceaux paginés, stockons chaque page dans un <div> et employons quelques scripting DOM pour cacher toutes les couches sauf la page courante.

@voir fonctionner cet exemple

[php]
<?php
require_once 'Pager/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:revealDiv(%d)',  //Pager replaces "%d" with the page number...
    'perPage'  => 10, //afficher  10 item par page
    'delta'    => 5,
    'itemData' => $data,
);
$pager = & Pager::factory($pager_params);
$n_pages = $pager->numPages();
$links = $pager->getLinks();
?>
<html>
<head>
    <script type="text/javascript">
    var n_pages = <?php echo $n_pages ?>;
    function revealDiv(n)
    {
        for (var count = 1; count <= n_pages; count++) {
          document.getElementById("page"+count).style.display = 'none';
        }
        document.getElementById("page"+n).style.display = 'block';
    }
    </script>
    <style type="text/css">
    div.page {
      background: #FFFF99;
      border-top: 1px solid #FFBF99;
      border-bottom: 1px solid #FFBF99;
    }
    </style>
</head>
<body>
<h1>PEAR::Pager exemple with JavaScript</h1>
<?php echo $links['pages']; ?>
<hr />
<?php
for ($i=1; $i <= $n_pages; ++$i) {
    echo '<div class="page" id="page'.$i.'">';
    echo '<h2>Page '.$i.'</h2>';
    foreach ($pager->getPageData($i) as $item) {
        echo 'Item '.$item.'<br />';
    }
    echo '</div>';
}
?>
<hr />
<script type="text/javascript">
revealDiv(1);
</script>
</body>
</html>

à lire aussi