En Internet hay varios ejemplos de webs con paginadores extensos. Digg.com es una de ellas, pero quizás sean los resultados de búsqueda de Google el ejemplo más claro. En estos casos las páginas vienen numeradas. Si quieres visitar una… sólo debes cliquear en cualquiera de los botones.

Sin embargo, no existe necesidad de agregar todos los números además del “anterior” y “siguiente” dado que usualmente no tiene sentido ver los resultados de la página 6 si todavía no hemos visto los de la 4. ¿Cómo se resuelve esto? Aquí presentamos un inteligente y original reemplazo para la paginación convencional.

Es un sencillo script que convertirá la fea paginación corriente en un bonito deslizador y francamente MooTools hace la mayoría del trabajo.

El CSS

1.    div.paginate {
2.      line-height: 23px;
3.    }
4.
5.    div.slider {
6.      width: 180px;
7.      height: 22px;
8.      float: left;
9.      margin: 2px 5px;
10.      cursor: pointer;
11.      background: url(’Slider.png’) center center no-repeat;
12.    }
13.
14.    div.knob {
15.      width: 22px;
16.      height: 22px;
17.      cursor: pointer;
18.      background: url(’Knob.png’) no-repeat;
19.    }
20.
21.    div.knob:hover {
22.      background-position: 0 -22px;
23.    }
24.
25.    span.current {
26.      font-weight: bold;
27.    }

Ejemplo del HTML

1.    <div class="paginate">
2.      <a href=”index.php?start={start}” class=”link” style=”display: none;”>11</a>
3.      <span class=”per” style=”display: none;”>5</span>
4.      <div class=”slider”><div class=”knob” title=”Drag me to go to the desired page”></div></div>
5.      <span style=”float: left;”>Page <span class=”current”>2</span> of 11</span>
6.    </div>

El JavaScript se puede ver desde aquí: Pagination.js

Y finalmente podrás descargar todo junto aquí »

Aquí podrás ver una comparación entre el paginador de Google y el que se incluye en este tutorial:

Lo más común es que utilices la paginación para una lista de ítems, digamos posts de blog por ejemplo. Y provees la cantidad total de posts, cuántos deseas mostrar por página, un valor de comienzo y un link que se utiliza para la generación de la URL. Este sólo da salida al deslizador, el manejo real de tus páginas es algo que todavía tienes que hacer por tu cuenta.

Para utilizar este script incluye MooTools-core, Drag.js y Slider.js de MooTools-more y pagination.js… y ya está todo listo.

El ejemplo PHP

1.    <?php
2.    /**
3.     * To generate the pagination pass in:
4.     * int $start - Your
5.     * string $link - A link for your pages with {start} to be replaced
6.     * int $count - The total number of entries in your list
7.     * int $per - The number of elements shown per page
8.     *
9.     * Example: paginate(!empty($_GET['start']) ? $_GET['start'] : 0, ‘index.php?start={start}’, 52, 5);
10.    */
11.
12.    function paginate($start, $link, $count, $per = 10){
13.      if($start<0 || $start>$count) $start = 0;
14.
15.      $current = floor($start/$per)+1;
16.      $pages = ceil($count/$per);
17.
18.      return ‘<div class=”paginate”>
19.          <a href=”‘.$link.’” class=”link” style=”display: none;”>’.$pages.’</a>
20.          <span class=”per” style=”display: none;”>’.$per.’</span>
21.          <div class=”slider”><div class=”knob” title=”Drag me to go to the desired page”></div></div>
22.          <span style=”float: left;”>Page <span class=”current”>’.$current.’</span> of ‘.$pages.’</span>
23.        </div>’;
24.    }

Utiliza este script con los links “Siguiente” y “Anterior” y tu sistema de paginación se verá mucho más accesible. Decididamente una implementación excelente en respuesta a un problema común.

Fuente: og5.net/christoph