Paginación personalizada con anterior y siguiente en jQuery

En este artículo vamos a crear un paginador personalizado utilizando funciones de anterior y siguiente en jQuery. Lógicamente, puedes tratar este artículo como una simple demostración sobre como implementar las funciones de anterior y siguiente. Vamos a utilizar algunos elementos UI de HTML y vamos a aplicar la funcionalidad de paginado mediante el uso de códigos de jQuery nativos. De esta manera podrás obtener información sobre qué página es la que solicita el usuario, y una vez lo tengas, crear la llamada ajax jQuery y obtener los datos de la base de datos para mostrarlos. Para seguir este tutorial necesitas saber lo básico de jQuery y CSS, sino es posible que te termines perdiendo. Espero que te guste el tutorial.

Podemos encontrar muchos paginadores en la red, es cierto. Aquí, en este artículo vamos a desarrollar el nuestro propio, sin usar códigos de terceros ni librerías que te lo den todo hecho. Porque ya sabéis que en programación.net somos firmes defensores de crear y de escribir nuestros propios, así mejoraremos como programadores. Antes de nada, decir que esto es sólo una demo, por lo que si necesitas más funcionalidades, tendrás que desarrollarlas tú mismo.

Lo primero de todo es crear la página:

<!DOCTYPE html>
<html>
<head>
    <title>Demo de paginacion</title>
</head>
<body>
   <div id="container">
        <div id="outer">
            <div>-6</div>
            <div>-5</div>
            <div>-4</div>
            <div>-3</div>
            <div>-2</div>
            <div>-1</div>
            <div class="first">0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
        </div>
        <div>
            <table>
                <tr>
                    <td class="prev" title="Previous"><<<>
                    <td class="next" title="Next">>>></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Ahora aplicamos algo de CSS para que se vea bonito y por supuesto, con estilo:

<style>
       #outer div {
           width: 20px;
           height: 20px;
           border: 1px solid #ccc;
           border-radius: 5px;
           padding: 10px;
           margin: 10px;
           box-shadow: 1px 1px 1px #999;
           font-style: oblique;
           text-align: center;
           float: left;
           background: green;
       }

       #outer .first {
           background: blue;
       }

       .prev, .next {
           font-weight: bold;
           font-size:30px;
           padding:10px;
           cursor:pointer;
       }

       #container {
           text-align: center;
           width: 50%;
           margin-left: 25%;
       }
   style>

Llamamos a jQuery:

<script src="jquery-1.11.3.min.js"></script>

Ejecuta la página y debería quedar tal que así:

Ahora añadimos nuestros scripts

<script>
        $(document).ready(function () {
            var $first = $(".first");
            var i = 0;
            $(".prev").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");                   
                } else {
                    $first = $first.prev();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
            $(".next").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");
                } else {
                    $first = $first.next();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
        });
    </script>

Como puedes comprobar en el bloque de código, estamos comprobando que $('#outer div’).length / 2 < i en cada clic. Esto devolverá true cuando el usuario clique después que la selección llegue al final.

Puedes ver una demostración de esto, en este enlace.

Código Completo

<!DOCTYPE html>
<html>
<head>
    <title>Demo paginacion</title>
    <script src="jquery-2.0.2.min.js"></script>
    <script>
        $(document).ready(function () {
            var $first = $(".first");
            var i = 0;
            $(".prev").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");                   
                } else {
                    $first = $first.prev();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
            $(".next").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");
                } else {
                    $first = $first.next();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
        });
    </script>
    <style>
        #outer div {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            box-shadow: 1px 1px 1px #999;
            font-style: oblique;
            text-align: center;
            float: left;
            background: green;
        }

        #outer .first {
            background: blue;
        }

        .prev, .next {
            font-weight: bold;
            font-size:30px;
            padding:10px;
            cursor:pointer;
        }

        #container {
            text-align: center;
            width: 50%;
            margin-left: 25%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="outer">
            <div>-6</div>
            <div>-5</div>
            <div>-4</div>
            <div>-3</div>
            <div>-2</div>
            <div>-1</div>
            <div class="first">0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
        </div>
        <div>
            <table>
                <tr>
                    <td class="prev" title="Previous"><<<</td>
                    <td class="next" title="Next">>>></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

¿Te ha gustado este tutorial? ¿Te gustaría ver en esta web un tutorial sobre algo específico? Solamente debes decírnoslo en los comentarios y el equipo de programacion.net nos pondremos manos a la obra.

Fuente: Sibeesh Passion

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
SIGUIENTE ARTÍCULO