Artículo

---

5 ¡votar!

Paginación con jQuery, MySQL y PHP

Te ayudamos a desarrollar algo que está muy de moda en la red, la paginación con jQuery. En unos sencillos pasos, te explicamos como se hace.

Para empezar necesitamos 5 ficheros, tres archivos PHP y dos de javascript, incluyendo la librería de jQuery:

-config.php (Configuración de la BD)
-pagination.php
-pagination_data.php
-jquery.js
-jquery_pagination.js

Creamos la tabla

CREATE TABLE messages
(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT
);

jquery_pagination.js
Esta secuencia de comandos funciona como un controlador de datos

$(document).ready(function()
{
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first")
.css({'color' : '#FF0084'}).css({'border' : 'none'});
Display_Load();
$("#content").load("pagination_data.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
});
});

config.php
Introduce el host, nombre de usuario y password de tu BD

pagination.php
Interfaz de paginación para el usuario

pagination_data.php
Script simple de visualización de datos de la tabla de mensajes

CSS Code
El CSS para que queden bonitos los selectores de paginas

#loading
{
width: 100%;
position: absolute;
}
li
{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #dddddd;
color:#0063DC;
}
li:hover
{
color:#FF0084;
cursor: pointer;
}

Ver demo

Publicado por: Jorge Lopez

Recomendar a un amigo

Compartir en redes

Email  

Comentarios