Categorías
Programacion PHP

Paginacion sin usar Base de datos (crear paginacion en paginas estaticas)

Desde uno de los foros que visito concurrentemente en este caso ForoBeta, salto una duda, de como realizar en php la paginacion de contenido cargado a mano, en pocas palabras, es un contenido que uno escribe sin necesidad de hacer consultas a la base de datos.

En nuestro caso usaremos Jquery para ser mas facil y rapido, solo debemos crear un html de esta forma:

[highlight]
<html>
<head>
    <title>Paginacion sin BD</title>
</head>
<body>
    
    <div id="page_1">
        Contenido del div 1
    </div>    
    <div id="page_2" style="display:none">
        Contenido del div 2
    </div>    
    <div id="page_3" style="display:none">
        Contenido del div 3
    </div>    
    <div id="page_4" style="display:none">
        Contenido del div 4
    </div>
    <p>
        <a href="javascript:void(0);" paginacion="1">1</a>&nbsp;<a href="javascript:void(0);" paginacion="2">2</a>
        &nbsp;<a href="javascript:void(0);" paginacion="3">3</a>&nbsp;<a href="javascript:void(0);" paginacion="4">4</a>
    </p>
    <!-- jquery -->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() { 
            $('a').on("click",function(){
                var paginacion = $(this).attr('paginacion');
                var div = "#page_"   paginacion;
                $("div[id!=" div "]").hide();
                $(div).fadeIn("slow");
            });
        });
    </script>
</body>
</html>
[/highlight]

Segun mi ejemplo debemos crear tantos divs como “paginacion” quieres tener.. por ejemplo si queres que tenga 4 paginas entonces debes crear 4 div’s con la caracteristica siguiente:

[highlight]
<div id="page_1">        
Contenido del div 1
</div>  
[/highlight]

Una ves que tienes la cantidad de divs que quieres debes crear la misma cantidad pero links..

[highlight]<a href="javascript:void(0);" paginacion="1">1</a>[/highlight]

Donde el atributo "paginacion" es el que ayudará a saber cual div mostraremos y cuales ocultaremos. 

Un ejemplo de como queda esta aqui Paginacion sin BD

Por Victor Ramirez

Soy un analista de sistemas informáticos apasionado por la tecnología y navegante de internet desde el 2007. Mi experiencia en el campo de la informática me ha permitido adquirir habilidades y conocimientos relevantes en áreas como programación, seguridad informática, redes y comunicaciones, bases de datos y tecnologías de la información en general.

Mi pasión por la tecnología me impulsa a estar al tanto de las últimas tendencias en el campo de la informática y me motiva a explorar nuevas tecnologías. Como analista de sistemas, estoy acostumbrado a trabajar en proyectos complejos y tengo habilidades para resolver problemas técnicos.

5 respuestas a «Paginacion sin usar Base de datos (crear paginacion en paginas estaticas)»

Hola, creo que tienes unos errores en el código; especialmente en el script, solamente es en la concadenación de las variables en javascript con el texto:

$(document).ready(function() {

console.log(“test”);

$(‘a’).on(“click”,function(){

var paginacion = $(this).attr(‘paginacion’);

var div = “#page_” + paginacion;

$(“div[id!=”+ div + “]”).hide();

$(div).fadeIn(“slow”);

});

});

Hola, he estado probando el tutorial y debo decirte que tiene un pequeño
fallo, y es que no admite ningun mas, ya que si lo pones no
muestra nada.

Un ejemplo:

Contenido del div 1

Esto ya no funciona, no muestra absolutamente nada, sin embargo si lo pones asi:

Contenido del div 1

si que funciona, pero claro no puedes poner ningun tipo de estilo ni nada, ya que solo sirve para texto.

¿alguna solucion?

Gracias por anticipado.

Deja una respuesta