Paginación de resultados con jQuery, Ajax y PHP
La paginación de resultados se hace necesaria a medida que tenemos grandes cantidades de registros que mostrar.
En este artículo vamos a explicar una versión mejorada sobre la paginación de resultados pero esta vez vamos a utilizar las tecnologías: jQuery, Ajax, PHP y MySQLi.
Cuando tenemos muchos registros y no queremos mostrar una lista de registro muy larga podemos usar paginación para mostrar los resultados de la consulta en distintas páginas.
Cuando se presentan en una página web registros crecientes de una tabla de una base de datos en formato listado, en la mayoría de los casos acaban siendo demasiados registros como para colocarlos todos en una misma página. En estas ocasiones se suele paginar los resultados, quizás cientos, en distintas páginas con conjuntos de registros mucho menos numerosos.
Por ejemplo, podemos presentar los resultados en páginas de 10 elementos o 20, dependiendo de nuestras intenciones y el tipo de datos que se estén presentando. Este efecto lo has podido observar repetidas veces en los buscadores.
En este artículo vamos a ilustrar un ejemplo en el que vamos a tener más de 100 productos de nuestra tienda que estamos leyendo de la base de datos y hemos decidido mostrarlos de 6 en 6.
La paginación se puede hacer solo con PHP pero, en este caso, cada vez que se pulsa en un número de página se recarga la página. Quizá no te interesa eso por cuestiones de usabilidad y de hacer esperar al usuario para ver más resultados. En esta entrada vamos a ver como aplicarle jQuery y Ajax para paginar resultados sin recargar la página de nuevo.
Esta entrada ha sido actualizada el 16/07/2018 aportando toda la experiencia, profesionalidad y compromiso que hemos adquirido en el transcurso del tiempo.
En el archivo principal o index.php, dentro del <head> debes agregar los scripts y estilos necesarios para hacer funcionar la paginación:
Tan solo agregamos estilos propios del ejemplo y la librería jQuery. En el ejemplo en funcionamiento, para el aspecto visual también nos apoyamos en la tecnología Bootstrap para no tener que aplicar muchos estilos propios. De esta forma nos ahorramos mucho trabajo.
En el archivo principal o index.php es importante agregar el siguiente código:
<?php
require('config.php');
$result = $connexion->query('SELECT COUNT(*) as total_products FROM product WHERE active = 1');
$row = $result->fetch_assoc();
$num_total_rows = $row['total_products'];
?>Requerimos del archivo «config.php» que tan solo conecta con la base de datos utilizando la tecnología MySQLi y dispone del número de elementos que queremos para cada página. Este archivo contiene:
Después tan solo hacemos una consulta a la base de datos para saber el número de productos que hay activos que será un parámetro importante para el número de páginas.
Dentro del <body> debes agregar el código que recorre los primeros registros y los muestra en pantalla, además de los números de paginación:
<?php
//Si hay registros
if ($num_total_rows > 0) {
$num_pages = ceil($num_total_rows / NUM_ITEMS_BY_PAGE);
$result = $connexion->query(
'SELECT * FROM product p
LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1)
LEFT JOIN image i ON (i.id_product = p.id_product AND cover = 1)
WHERE active = 1
ORDER BY date_upd DESC
LIMIT 0, '.NUM_ITEMS_BY_PAGE
);
if ($result->num_rows > 0) {
echo '<ul class="row items">';
while ($row = $result->fetch_assoc()) {
echo '<li class="col-lg-4">';
echo '<div class="item">';
echo '<h3>'.$row['name'].'</h3>';
...
echo '</div>';
echo '</li>';
}
echo '</ul>';
}
if ($num_pages > 1) {
echo '<div class="row">';
echo '<div class="col-lg-12">';
echo '<nav aria-label="Page navigation example">';
echo '<ul class="pagination justify-content-end">';
for ($i=1;$i<=$num_pages;$i++) {
$class_active = '';
if ($i == 1) {
$class_active = 'active';
}
echo '<li class="page-item '.$class_active.'"><a class="page-link" href="#" data="'.$i.'">'.$i.'</a></li>';
}
echo '</ul>';
echo '</nav>';
echo '</div>';
echo '</div>';
}
}
?>Finalmente dentro del <head> o justo debajo de la etiqueta de cierre </body> puedes agregar el controlador del evento:
<script type="text/javascript">
$(document).ready(function() {
$('.pagination li a').on('click', function(){
$('.items').html('<div class="loading"><img src="images/loading.gif" width="70px" height="70px"/><br/>Un momento por favor...</div>');
var page = $(this).attr('data');
var dataString = 'page='+page;
$.ajax({
type: "GET",
url: "ajax.php",
data: dataString,
success: function(data) {
$('.items').fadeIn(2000).html(data);
$('.pagination li').removeClass('active');
$('.pagination li a[data="'+page+'"]').parent().addClass('active');
}
});
return false;
});
});
</script>El código anterior lo que hace es esperar a que algún número del bloque de paginación sea clikeado para ejecutar el proceso de paginación.
Por cada enlace de la paginación que se haga click, rellenamos el contenedor de elementos con una imagen que aplica el efecto de cargando… (esto se puede quitar para acelerar el proceso de la paginación), recogemos el parámetro que nos indica el número de página que el usuario quiere ver y, luego, mediante la técnica Ajax hacemos una llamada asíncrona al archivo «ajax.php» pasándole el número de página usando el método GET.
Mediante el success del ajax depositamos la información que nos envía el archivo «ajax.php» en el contenedor deseado y activamos el número de página en el que se ha hecho click.
El archivo «ajax.php» se encarga de retornar los productos que hay en la página escogida. Puedes ver el código a continuación:
<?php
require_once('config.php');
$html = '';
$page = $_GET['page'];
$rowsPerPage = NUM_ITEMS_BY_PAGE;
$offset = ($page - 1) * $rowsPerPage;
sleep(1);
$result = $connexion->query(
'SELECT * FROM product p
LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1)
LEFT JOIN `image` i ON (i.id_product = p.id_product AND cover = 1)
WHERE active = 1
ORDER BY date_upd DESC LIMIT '.$offset.', '.$rowsPerPage
);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$html .= '<li class="col-lg-4">';
$html .= '<div class="item">';
$html .= '<h3>'.$row['name'].'</h3>';
...
$html .= '</div>';
$html .= '</li>';
}
}
echo $html;
?>Qué hace este código?
- Conectamos con la base de datos.
- Recepcionamos la página que ha elegido el usuario.
- Calculamos el número por el cual se debe empezar a retornar registros.
- La función sleep() la usamos para retrasar el proceso y ver el efecto de cargando. Se puede quitar si no interesa.
- Hacemos la consulta paginada usando LIMIT en la consulta.
- Recorremos y rellenamos nuestra variable $html con la información de los registros paginados.
- Lo retornamos con echo a la llamada Ajax.
Autor
¿Buscas trabajo de programador?
145 respuestas a “Paginación de resultados con jQuery, Ajax y PHP”
Deja una respuesta
90 artículos que te podrían interesar
Ver más sobre
Excelente aporte, muchas gracias, pero aparte de ese funcionamiento lo requiero con un Datatable ya que son demasiados datos 5000+ y en tabla me ahorraria un buen espacio, y tendria la opcion de filtrar que es lo que me estan pidiendo.
que tendria que modificar para hacer funcionar un datatable….
muchas gracias de antemano
Hola, ahí te recomiendo que vayas a la página oficial de Datatable para ver que opciones que brinda el plugin. Saludos
Soy nueva en esto, excelente aporte, soy maestra y quiero implementar la paginación en una de los proyectos con mis alumnos, pero al ejecutar el código y quererlo implementar en mi proyecto, no me manda a la segunda pagina, solo me muestra la primera con la informacion correspondiente, al querer navegar en la paginación no realiza la operación.
Gracias de antemano!!
Hola,
Para poder darte una respuesta acertada, necesitará ver online el resultado de tu código. Posiblemente la consola del navegador nos pueda ayudar a saber que está sucediendo.
Jose Aguilar,
Saludos
Excelente aporte me sirvió mucho, gracias !!!!
Hola.
De antemano muchas gracias por la guía.
Una pregunta. Cómo puedo hacer que una vez esté en la página #3, cuando recargue la página me siga mostrando los resultados de la página #3
Hola,
Como solución rápida quizá tengas que considerar la paginación con php y parámetros en la url:
https://www.jose-aguilar.com/blog/paginacion-resultados-con-php/
Saludos
HOLA ME FUNCIONO TU ENTRADA MUCHAS GRACIAS.
PERO TENGO UNA PREGUNTA
¿COMO PUEDO METER LOS BOTONES DE SIGUIENTE Y ANTERIOR EN LA PAGINACION Y QUE AL SELECCIONARLOS NOS PASE A LA SIGUIENTE PAGINA PERO SIN ACTUALIZAR TODA LA PAGINA?
ESPERO QUE ME PUEDAS AYUDAR
GRACIAS
Hola,
Eso es lo que se consigue con la técnica Ajax. Fíjate bien en el código jQuery y el que se ejecuta en el servidor (el archivo ajax.php).
Saludos
Buenos días, he intentado adpatar este ejemplo pero llevado a arquitectura MVC y el $_GET[‘page] devueto por el ajax no es reconocido dentro del controlador; por lo que la paginación no me funciona y genera error.
algo así he ehecho en el controllers:
$news=new Noticias();
$html = »;
$NUM_ROWS=$news->num_rows();
$page = $_GET[‘page’];
$rowsPerPage = NUM_ITEMS_BY_PAGE;
$offset = ($page – 1) * $rowsPerPage;
sleep(1);
if ($NUM_ROWS > 0) {
foreach ($news->_search($offset,$rowsPerPage) as $row) {
$html .= »;
$html .= »;
$html .= »;
$html .= ».utf8_encode($row[‘NTNOT_Titulo’]).»;
$html .= ».strip_tags(utf8_encode($row[‘NTNOT_Descripcion’])).»;
$html .= ».($row[‘NTNOT_fecha’]).’ ‘;
$html .= ‘ Ver’;
$html .= »;
$html .= »;
}
}
echo $html;
}
Hola,
Te recomiendo que hagas echos o imprimas la consulta que estás intentando hacer y ejecutarla directamente en la base de datos para ver si da algún problema. Para que el parámetro get sea reconocido debes crear una llamada Ajax con el metodo get.
Saludos
tengo un problema al mostrar los registro «me pueden apollar como es la estructura de la base de datos que campos»
Hola,
Gracias por tu mensaje.
La estructura de la base de datos la puedes localizar en una instalación limpia de PrestaShop. En este caso, lo ideal es que adaptes este código a tu base de datos cambiando las consultas pero manteniendo los límites de la paginación.
Saludos
esta padre la paginacion peo como se podria hacer esto
1 2 3 4 5 6 … > 500
1 … > 495, 496, 497, 498, 499, 500
Hola,
En el código que se agrega en el body y genera los números debes hacer un ajuste para mostrarlo como deseas.
Saludos
Fatal error: Call to a member function fetch_assoc() on boolean in C:\xampp\htdocs\paginacion\index.php on line 4
solucionado
me marca ese error ayuda x favor
Fatal error: Call to a member function fetch_assoc() on boolean in C:\xampp\htdocs\paginacion\index.php on line 4
Exelente tutorial amigo, me salvaste de una que necesité para un proyecto. Muchas gracias. Dígame dónde puedo hacerle humildemente un reconocimiento a su labor. Soy Larry franco de colombia (sigelip@gmail.com) watsapp 57 3136619782
Hola,
Muchas gracias por su reconocimiento. Con su comentario ya es más que suficiente.
Saludos
parece que el error es cuando inicia es que le asignas :
$pageNum = 1;
y en el if de la paginación le dices:
if ($pageNum != 1)
cargue tu ejemplo y cuando esta en la primera paginación, no muestra la navegación.
saludos, logre implementar este proyecto a mi pagina en local, pero solo tengo un pequeño problema, al inicio del archivo pagination.php, yo requiero de una variable que es enviada mediante url, la cual la capturo por medio de un GET asi:
$segmento = $_GET[‘segmento’];
$query_num_services = mysql_query(“select SegmentoNombre from segmento, tematicas where segmento=’”.$segmento.”‘ and tematicas.segmento=segmento”, @$conexion);
ahora le digo a la pagina que me muestre 5 registros por pagina, la consulta tiene 6 registros, me muestra los 5 primeros pero al darle a siguiente no me muestra nada, PERO si a la consulta le agrego el valor manualmente me funciona a la perfeccion, que podría ser?
Hola,
Debes asegurarte que tu variable segmento está siendo recibida correctamente al ejecutarse el Ajax al pulsar en algún número de la paginación.
Saludos
Hola!! me encanta tu página, gracias por todo lo que nos enseñas. Tengo un problema y es que necesito paginar comentarios y respuestas con msqly y pdo …he intentado aplicar todos los ejemplos que tienes pero no me funciona ninguno..¿Me puedes ayudar?
Gracias y saludos
Hola,
Gracias por tu mensaje.
Para este tipo de ayudas que se salen de lo que hay en el blog debe enviarnos un ticket al centro de soporte y allí le indicaremos como podemos proceder:
https://www.jose-aguilar.com/modulos-prestashop/es/soporte
Saludos
No sirvio esta basura…
Prueben esto y dejen de sufrir:
https://github.com/wikiti/jquery-paginate
buen día a todos excelente aporte, implemente este paginador para una web en la que estoy trabajando, pero no me funciono, a continuación les explico los problemas que se presentaron y como los fui solucionando para que funcionara al 100%, la solución fue leer todos los comentarios de este post y de ahi partir para ir probando hasta hacerla funcionar del todo.
Primero los problemas:
1 – los botones no funcionaban.
2 – primera pagina cargaba bien, pero al seleccionar otro nunca cargaba solo la imagen de loading.
3 – solo avanzaba una pagina, después no funcionaban los botones.
ahora si las soluciones
1 – yo utilizo una versión de jQuery actual, para solucionar este problema cambie la linea – > $(‘.paginate’).live(‘click’, function () { por esta otra linea $(‘.paginate’).on(‘click’, function () { *Nota: esta solución la dieron muchas personas, hasta el mismo autor
2 – bien en este punto lo que a mi me funciono fue que al realizar la conexión a la BD utilizaba un «require_once» de la siguiente manera -> require_once «config/conexion.php»; la solución fue poner la ruta completa del archivo en el «require_once» -> require_once «C:/xampp/htdocs/config/conexion.php»; *Nota: estoy trabajando en localhost
3 – aquí la solución fue en nuevamente modificar la linea que se menciono en el punto 1 de este comentario -> $(‘.paginate’).on(‘click’, function () { la modificación que se le hizo es la siguiente -> $(‘#content’).on(‘click’, ‘.paginate’, function () {
con esto me funciono la paginacion al 100% ningún error
Hola Jose, Muchas Gracias por el Aporte, me gustaria que me ayudaras con la paginacion, puedo avanzar a la pagina 2, pero una vez ahi, no me puedo devoler a la 1 o a otra, sabes la forma de remediar eso…. espero me puedas ayudar.
Hola buenos días,
Por algún motivo que desconocemos no se copiaron bien los class de los enlaces de la paginación. Prueba a añadir el class=»paginate» en todos los enlaces de la paginación. Hemos corregido la entrada por si te sirve de ayuda.
Saludos
Estimado Jose, mi pregunta es bien básica y de antemano pido disculpas por ello: ¿en el ejemplo que nos estas compartiendo, se leen todos los registros de la base de datos mysql que cumplan la condición de inclusión de una sola vez (independiente que el código los vaya mostrando en paginas de 10 registros), o va leyendo desde la base de datos solamente los 10 registros que se requieren mostrar según la pagina que seleccione el usuario. Si es que es lo primero, es decir se leen todos de una vez, esto sería equivalente a lo que puede hacer el plugin «datatable» o no son equivalentes ? como se entenderá, mi pregunta tiene relación con la carga de memoria ya que si por ejemplo son cientos de registros los que se van a leer, es mas recomendable hacer lecturas parciales y no totales de la base de datos
Muchas gracias!!
Hola buenas tardes,
Lógicamente esta aplicación es más óptima que el plugin datatable debido a que las consultas a la base de datos son limitadas. Tan solo debes fijarte en la siguiente consulta que hacemos:
$query_services = mysql_query(«SELECT service_id, title, description, rating FROM services WHERE status=1 ORDER BY date_added DESC LIMIT $offset, $rowsPerPage», $conexion);
Si tienes conocimientos básicos de SQL te darás cuenta en la consulta anterior.
Saludos
Jose, si mi consulta se arma dinámicamente (dependiendo de ciertos criterios que seleccione el usuario en la página php donde se incluye el navegador), ¿en qué cambia tu código?. A propósito, muchas gracias, ha sido muy útil.
Quise decir el paginador, en lugar del «navegador».
Hola buenos días,
Para este tipo de ayudas que se salen de lo que hay en el blog debe enviarnos un ticket al centro de soporte y allí le indicaremos como podemos proceder:
https://www.jose-aguilar.com/soporte/
Saludos
Enterado. Muchas gracias
Hola, ante todo muchas gracias por su aporte, tengo un problema, me esta arrojando en siguiente error (Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in). Por favor me puede ayudar a solucionar esto.
Hola,
Para resolver su problema deberá hacer debug en su código. Todo apunta a que la consulta sql no es correcta. Intente hacer un echo de la consulta y ejecutarla en su base de datos para ver si retorna datos o un error.
Saludos
Hola.
Yo hice unas correcciones a los nombres de las tablas y campos de la página pagination.php, en las lineas 54 a la 64 y pude corregir los errores. Estos son los cambios:
$query_num_ratings = mysql_query(«SELECT COUNT(*) as num FROM services WHERE service_id=».$row_services[‘service_id’], $conexion);
$num_ratings = mysql_result($query_num_ratings, 0, «num»);
$query_sum_ratings = mysql_query(«SELECT SUM(rating) as sum FROM services WHERE service_id=».$row_services[‘service_id’], $conexion);
if(mysql_result($query_sum_ratings, 0, «sum») > 0)
$sum_ratings = mysql_result($query_sum_ratings, 0, «sum»);
else
$sum_ratings = 0;
echo $sum_ratings;
—-
Adicionalmente, para evitar el error Deprecated, le adicioné la siguiente instrucción en el archivo config.php:
error_reporting (E_ALL ^ E_DEPRECATED);
A mí me funcionó, espero que les sirva a uds. también.
Saludos.
Hola, estoy intentando aplicar esto a una búsqueda realizada por el usuario. Funciona bien la primer página, pero al entrar en la segunda me dice que no está definida la variable de búsqueda
Hola Jose, lo he probasdo con todos lo archivos originales y funciona perfecto.
En el momento el Jquery esta en la versión 3.1.1. ; es posible que puedas actualizar solo el index para que funcione con esta versión, dado que es realmente donde se ejecuta la paginación. Gracias
hola como están tengo este problema 🙁
mysql_num_rows() expects parameter 1 to be resource boolean given in php
o No database selected
estoy a punta de enloquecer si alguien por fa sabe se lo agradesco
ya que la consulta la estoy haciendo bien el problema se da al momento de seleccionar algun enlace
Hola,
Creo que te falta lo que se debe incluir en este archivo:
require(‘config.php’);
Debes conectar con tu base de datos. En el siguiente post explico como hacerlo:
https://www.jose-aguilar.com/blog/conectar-php-con-mysql/
Saludos
Me gustaria saber comohago para que solo me aparescan 3 5 botones en la parte de abajo ejemplo.
Anterior 1 2 3.. Siguiente
Está explícito el código de esta parte en el artículo.
No veo cómo hacer para que aparezcan solo varias páginas cuando son muchas las que hay que mostrar. Algo así:
1, 2, 3,………………………………., 400,401
Siento decirte que eso no está implementando. Debes pensar como hacerlo tu. Es posible pero debes pensarlo bien. Saludos
Hola. Pudiste resolver este tema? Hace semanas que doy cuenta y no consigo cortar la paginación para que no se haga tan larga.
Gracias
Hola
Buen post
¿No se puede insertar un botón que permita ir directamente a la última o primera página?
Gracias
Saludos
Hola, mi la lista de la paginacion no me funciona, cuando doy click a un numero no se mueve.
Inspeccionando el elemento, que se queda en la pagina 1 solo dice esto:
1
2
3
4
Siguiente
No funcionan ningun boton de la paginacion.
EL post ya es antiguo, pero es una buena base para hacer que funcione, yo me encontré ante varios ajustes por hacer, en primera la versión de jquery, usar .on() en lugar de .live(), y detallitos en el código, etc… pero logré que funcionara, ahora ando ajustando los filtros de categorías y orden, pero aún así, este post me ahorró un buen de trabajo. Gracias al autor!
Espero que lo hayas resuelto Daniela. Saludos.
Excelente aporte fue de gran uso para mi sitio, gracias amigo
A mi lo que me ocurre es que solo permite pasar de la página 1 a la 2 y en la 2 se para. Alguien podría decirme porque puede ser?
Saludos.
Me encantaría poder usar este codigo, pero me salta un error supuestamente relacionado con la base de datos como habeis comentado que no soy capaz de corregir. Se ha dicho que el problema se solucionaba comentando unas lineas de codigo pero a pesar de hacer eso no se resuelve. Alguien que le funcione podria pasar el codigo con los errores corregidos o decirnos como hacer para solucionarlo?
Gracias
Saludos
Notice: Undefined variable: conexion in C:xampphtdocspaginationincludespagination.php on line 5
Warning: mysql_query() expects parameter 2 to be resource, null given in C:xampphtdocspaginationincludespagination.php on line 5
Warning: mysql_num_rows() expects parameter 1 to be resource, null given in C:xampphtdocspaginationincludespagination.php on line 6
alguien me puede ayudar con ese error ya configure la conexion y nada
Hola, no es un error, es un notice, supongo que la aplicación continua. El mensaje de error da la pista de que están fallando los parámetros de conexión:
$conexion = mysql_connect(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD);
mysql_select_db(DB_DATABASE, $conexion);
Saludos
Me ha ido de maravilla el tutorial, muchas gracias!
Hola Jose, se que es un tema viejo … pero estoy usando tu ejemplo para poder lograr una paginacion en una web y no logro hacer funcionar los botones del paginador… cuando quiero pasar a otra «page» no funciona el vinculo… que podria estar haciendo mal? use tu codigo y solo reemplace las consultas…
Saludos
Hola Juan,
Indícanos el enlace para verlo en directo.
Saludos
se agradece mucho tu ayuda, me sirvio mucho para aprender, ya que estoy empezando con jquery.
Queria aportar informando que a los que no les envia la informacion de las paginaciones pueden colocar la funcion de esta forma:
$(‘.paginate a’).live(‘click’, function(){
por lo menos a mi me funciono asi.
Y donde mierda esta config.php ???
Nunca explican bien estos idiotas nada funciona
CONCHATUMADRE
Me hace gracia este tipo de comentarios.
Se supone que usted sabe algo de programación. Espavílese. Conectar con una base de datos no es tan difícil.
Saludos
saludos, logre implementar este proyecto a mi pagina en local, pero solo tengo un pequeño problema, al inicio del archivo pagination.php, yo requiero de una variable que es enviada mediante url, la cual la capturo por medio de un GET asi:
@$especialidadId = $_GET[‘especialidadId’];
$query_num_services = mysql_query(«select especialidadNombre from especialidad, tematicas where especialidad.especialidadId='».$especialidadId.»‘ and tematicas.especialidadId=especialidad.especialidadId», @$conexion);
ahora le digo a la pagina que me muestre 3 registros por pagina, la consulta tiene 6 registros, me muestra los tres primeros pero al darle a siguiente no me muestra nada, PERO si a especialidadId le asigno el valor manualmente me funciona a la perfeccion, que podría ser?
Hola me gustaría agregarle una opción de búsqueda para que el usuario escriba una palabra de búsqueda y se muestre solo los registros que cumplan la condición.
Para todos los que tienen el problema de que no pasa d ela primera pagina, es por que estan usando la funcion de jquery :
.liveDicha funcion fue sustituida por:.onLa solución no tan buena, pero que funciona y es sencilla de implementar en solo 2 PASOS es la siguiente:
PASO 1:
Reeplazar esta linea:
$('.paginate').live('click', function(){Por esta:
$('.paginate').on('click', function(){Nota solo se cambio la palabra .live por .on.
PASO 2:
Copiar todo el script, dentro de pajination.php, obviamente de primerito y fuera de las etiquetas de php.
LISTO! =) saludos a todos.
Excelente, fue la solucion exacta para el problema.
Saludos.
notable Jose Mariani!!!!! es la solución perfecta !!!
Ninguna de estas soluciones funcionará con .on() si nos referimos a $(‘.paginate’), porque el selector .paginate también se genera dinámicamente.
La solución pasa por referirnos al ancestro inmediato que no se genere dinámicamente, es decir:
$(‘#content’).on(‘click’, ‘.paginate ul li a’, function () {…});
Saludos.
cambia la lina del script por
$(‘.paginate li a’).on(‘click’, function(){
y ya esta todo ok
Probadlo así si tenéis las últimas librerías de jQuery:
$(«.paginate»).on(‘click’, ‘a’, function()
{
$(‘#content’).html(»);
var page = $(this).attr(«data»);
var dataString = ‘page=’+page;
….
Lo único que cambia con respecto al original es la forma de iniciar el jQuery. Además meter todo el script (desde hasta ) de la página dentro del propio archivo «pagination.php»
Saludos!!
Al parecer el problema con este script es que el jquery a usar necesariamente tiene que ser el 1.7 ya que si se ultiliza las ultimas librerias, estas no son compatibles con la funcion live, al no tener la funcion live y ser reemplazada con on o click, al refrescarse el div es como si apareciera un nuevo control que ya no es reconocido por las instruccion inicial.
solo me acepta un click, depues de eso, no importa en cual pagina en anterior o siguiente, el evento no se ejecuta, el javascript quedaria asi:
$(document).ready(function() {
$(‘.paginate’).on(‘click’, function(){
$(‘#content’).html(»);
var page = $(this).attr(‘data’);
var dataString = ‘page=’+page;
$.ajax({
type: «GET»,
url: «centro.php»,
data: dataString,
success: function(data) {
$(‘#content’).fadeIn(1000).html(data);
}
});
});
});
y el php quedaria asi
[QUOTE]
if ($total_paginas > 1) {
echo »;
echo »;
if ($pageNum != 1)
echo ‘Anterior‘;
for ($i=1;$i<=$total_paginas;$i++) {
if ($pageNum == $i)
//si muestro el índice de la página actual, no coloco enlace
echo '‘.$i.’‘;
else
//si el índice no corresponde con la página mostrada actualmente,
//coloco el enlace para ir a esa página
echo ‘‘.$i.’‘;
}
if ($pageNum != $total_paginas)
{
echo ‘Siguiente‘;
}
elseif($pageNum == $total_paginas)
{
echo ‘Siguiente‘;
}
echo »;
echo »;
}
[QUOTE]
firebug me arroja el siguiente error con respecto al uso de live.
TypeError: $(…).live is not a function
$(‘.paginate’).live(‘click’, function(){
Probablemente estés utilizando una librería jquery superior donde ya la función live está desfasada. Prueba de utilizar on() o click()
cambie el evento live por on y click
$(document).ready(function() {
$(‘.paginate’).click(‘click’, function(){
pero no hace click la etiqueta no es reconocida, no le faltaria un href??????
eso no está bien, debería ser asi:
$(‘.paginate’).on(‘click’, function(){
o
$(‘.paginate’).click(function(){
no me click en los enlaces, no me muestra como si fueran link; el atributo data captura el numero de pagina, pero no puedo hacer click:
echo » «;
if ($total_paginas > 1) {
echo »;
echo »;
if ($pageNum != 1)
echo ‘Anterior‘;
for ($i=1;$i<=$total_paginas;$i++) {
if ($pageNum == $i)
//si muestro el índice de la página actual, no coloco enlace
echo '‘.$i.’‘;
else
//si el índice no corresponde con la página mostrada actualmente,
//coloco el enlace para ir a esa página
echo ‘‘.$i.’‘;
}
if ($pageNum != $total_paginas)
echo ‘Siguiente‘;
echo »;
echo »;
}
echo » «;
split(): Empty regular expression in C:\xampp\htdocs\paginacion\includes\pagination.php on line 40 me sale ese problema por que
no se donde aparece en el ejemplo la función split(). En todo caso, prueba de sustituirla por explode()
Buenas… Amigo, muy buen aporte, pero veras tengo algo, estoy creando una pagina; Es una tienda online y quiero mostrar esta paginación en mi catalogo para mostrar un numero máximo de productos, mi pregunta es: que ahora que le eh modificado algunos datos(solo lo referente a la base de datos y los campos que quiero que muestre.) y ahora me tira un error. Crees que podrías ayudarme?
Nos tendrás que facilitar un enlace para ver el error y seguramente alguien te ayudará
el problema es que aun no lo tengo en linea, solo esta en localhost, me hacen falta un par de cosas pero si quieren les puedo dejar el código para mi catalogo y me dicen de antemano gracias
nombre; ?>
<img src="images/imagen; ?>» alt=»»>
descripcion; ?>
id, «Ver Detalle», «class=’boton1′»); ?>
los datos los obtengo de mi base de datos y todo estaba bien antes pero luego los clientes comenzaron a pedir mas diseños y ya que serian muchos se me ocurrió ponerle una paginacion pero no se como adaptarla sin romper la estructura anterior. la pagina es un proyecto personal y no me gustaría dejarla incompleta… Mil gracias
lo siento no salio el codigo completo
El ejemplo funciona bien cuando lo descargas, lo único que debes intervenir los archivos para definir bien las ubicaciones y direccionamientos.
Pero en general bien.
Saludos.
Buen dia.
el ejemplo funciona muy bien, pero al ingresar el doble o mas informacion, o tambien al reducir el numero de datos que muestre por pagina, las paginas se imcrementan y se distorciona el nuemro de paginas, me podrian ayudar a solucionar el problema.
Me funciona de mil maravillas pero estoy igual que Juan, se me rompe la paginacion al agregar algunas filas a la tabla
Que genial tutorial, excelentes codigos, muy facil de entender, gracias me has ayudado mucho en el desarrollo de mi proyecto.
Mil gracias, funciona perfectamente y ya lo acople con las bases de datos que estoy trabajando.
Saludos desde Tlaxcala, México.
Hola, tengo un problema me funciona casi bien.El problema que tengo es que al pinchar en la 2 pagina se me queda girando todo el rato el gif de cargando.
Creo que el problema es que no le llega la variable page de ajax.Por eso lo he cambiado por pagina.
En mi barra de dirección tengo esto:
http://localhost/cinecharlie/index.php?page=pelicula&portada=sh2.jpg
gracias un saludo
Doc te felicito, y me parece bueno tu aporte peor me sala un erro del split, si cambiamos eso por explode seria escente, gracias por tus aportes vale sun Peru
Hola me podrías ayudar con la estructura de la segunda tabla la de services_rating solucione los de la actualización del split a php 5.3 pero no he descifrado la estructura de la segunda tabla. Te agradezco de antemano tu ayuda.
Excelete tutorial te felicito !!!!!!!!! Muchos exitos
Estimados,
esta estupendo el articulo! pero al implementar todo ok, pero al hacer click en la segunda pagina me sale lo siguiente
Warning: mysql_query() expects parameter 2 to be resource, null given in C:\AppServ\www\portal\portal2\pagination_me\includes\pagination.php on line 3
Warning: mysql_num_rows(): supplied argument is not a valid MySQL result resource in C:\AppServ\www\portal\portal2\pagination_me\includes\pagination.php on line 4
Ayuda please!
Posiblemente te falte configurar el archivo config.php del ejemplo con tu base de datos
Hola, tu codigo es barbaro, pero tengo un problema, en mi caso necesito sacar los datos de la tabla cuya categoria sea igual a x, debo para eso pasar un parametro por get, como lo puedo incluir?
saludos
deberás modificar la siguiente linea:
var dataString = ‘page=’+page;
por
var dataString = ‘page=’+page+’&category=x’;
De alguna forma deberás capturar la categoría en el jquery
Y como es la sintaxis para enviar los parámetros por el atributo data en la etiqueta ?
estaría bien asi:
var page = $(this).attr(‘data’);
var fecha1 = $(this).attr(‘data’);
var fecha2 = $(this).attr(‘data’);
var status_enc = $(this).attr(‘data’);
var orderBy = $(this).attr(‘data’);
var ordenado = $(this).attr(‘data’);
var tipo_enc = $(this).attr(‘data’);
var dataString = ‘page=’+page+’&fecha1=’+fecha1+’&fecha2=’+fecha2+’&status_enc=’+status_enc+’&orderBy=’+orderBy+’&ordenado=’+ordenado+’&tipo_enc=’+tipo_enc;
Pero como lo hago en la etiqueta?
echo ‘‘.$i.’‘;
Me confunde la concatenación.
Mil gracias por tu pronta ayuda.
Esto en los enlaces de paginacion
Anterior‘;
De esa manera funcionara el nuevo parametro que envias y lo lees alla
var cat = $(this).attr(‘categoria’);
a los que tienen el problema esta es la verdadera solucion:…..
$query_num_ratings = mysql_query(“SELECT COUNT(*) as num FROM services WHERE service_id=”.$row_services[‘service_id’], $conexion);
$query_sum_ratings = mysql_query(“SELECT SUM(rating_num) as sum FROM services WHERE service_id=”.$row_services[‘service_id’], $conexion);
la solución solo comenten de la linea 54 a la linea 70…marca ese error por que no existe una tabla que se llama services_rating
-….. XD
a todos los que tienen este problema :
Warning: mysql_result() expects parameter 1 to be resource, boolean given in /home/ortopedi/public_html/01arg/includes/pagination.php on line 55
Warning: mysql_result() expects parameter 1 to be resource, boolean given in /home/ortopedi/public_html/01arg/includes/pagination.php on line 59
la solucion es la siguiente:
linea 54 y 57 sustituir por —>
$query_num_ratings = mysql_query(«SELECT COUNT(*) as num FROM services WHERE service_id=».$row_services[‘service_id’], $conexion);
$query_sum_ratings = mysql_query(«SELECT SUM(rating_num) as sum FROM services WHERE service_id=».$row_services[‘service_id’], $conexion);
error esa no es la solución solo comenten de la linea 54 a la linea 70…marca ese error por que no existe una tabla que se llama services_rating
-….. XD
Que tal, muchas gracias por tu ejemplo me sirvió mucho. Traigo un detalle,la pagina 1 me la carga perfectamente (con estilos y codigo html) pero al pasar a la pagina dos de resultados, solamente me despliega el texto plano, titulo descripcion etc. todo plano.
Sabras porque? muchas gracias!
Hola que tal, actualmente estoy creando un sitio web con una paginación similar a la que creaste, pero tengo un problema y espero que puedas ayudarme. Cuando nos encontramos en la página numero 10 por ejemplo y esa página tiene un enlace que me redirecciona hacia otro sitio, al querer volver con el botón regresar del navegador, no me deja en la paginación en la que se encontraba antes de salirme del sitio. Veo que en tu ejemplo ocurre lo mismo. Habrá alguna solución para esto? Gracias.
Muy bien, gracias buen ejemplo, me será muy util
Hola,como estan, lo que no se es que tengo q poner en los datos de conexion… localhost,alguien podria ayudarme?..que es? es el IP?DNS? o q?
y el resto?
o como se completa?alguien podria mostrame un ejemplo de como queda completado este codigo?gracias…
El código está completo. Lo único que te falta es crear las tablas necesarias en una base de datos y acceder desde la aplicación con mysqli
Si esta completo,pero nose que se pone en los datos de conexion, es decir en «localhost» q pongo?mi ip?mi dns?..
Hola,como estan, lo que no se es que tengo q poner en los datos de conexion… localhost,alguien podria ayudarme?..que es? es el IP?DNS? o q?
El ejemplo requiere de conexión a una base de datos para hacerlo funcionar. Se requieren los datos de conexión a la base de datos que vayas a utilizar.
Hola, lo que no se es que tengo q poner en los datos de conexion… localhost,alguien podria ayudarme?..que es? es el IP?DNS? o q?
A mi me tira este error y no sé cómo solucionarlo
Warning: mysql_result() expects parameter 1 to be resource, boolean given in /home/ortopedi/public_html/01arg/includes/pagination.php on line 55
y en la línea 59
A mi me tira este error y no sé cómo solucionarlo
Warning: mysql_result() expects parameter 1 to be resource, boolean given in /home/ortopedi/public_html/01arg/includes/pagination.php on line 55
Warning: mysql_result() expects parameter 1 to be resource, boolean given in /home/ortopedi/public_html/01arg/includes/pagination.php on line 59
Posiblemente algo está mal en la base de datos
No existe la tabla services_rating por eso…marca ese error…
Gracias por el código y la explicación, ayuda mucho tener gente como tú en esta comunidad 😉
Hola amigo, tengo un problema cuando son muchos registros me muestra todos los links del paginador,
anterior 1 2 3 4 …… 39 40 41 siguiente
no hay como hacer eso??
Este es el mismo problema que intento resolver. alguien me podria ayudar.
Muy bueno, pero solo puedo ver la página 1, no puedo ver las demás páginas. por favor como corrijo eso.
nos podrias poner la url de tu ejemplo para verlo?
por qué no dejas el código para descargarlo?????????
Aquí tienen el archivo para descargar:
http://www.jose-aguilar.com/scripts/jquery/pagination_me/pagination_me.rar
Sólo quería agradecer por el código, me ha ayudado bastante para darme una idea. He cambiado la opción live por un onclick de javascript para mis fines pero se mantiene casi integro lo demás, gracias de nuevo
en el php no hace falta en la etiqueta class=’paginate’ si no como va escuchar los eventos cada liga
hola, puedes colocar el codigo? por que no tienes un link para descargar ?
Hola, es lo que buscaba, no tuvieras el codigo fuente para ver como lo estas haciendo? existe una paginacion que luego de recibir los registros con una consulta, ya no vuelva a realizar otra, sino que pueda trabajar con los que tengo y paginar los mismos? Saludos de antemano
Hola Jose buenos dias, me gusta tu pagina, me gustaria saber si tienes el codigo de este ejemplo de paginacion con ajax, me refiero a estilos y demas, te quedare agradecido. Gracias
Aquí tienen el archivo para descargar:
http://www.jose-aguilar.com/scripts/jquery/pagination_me/pagination_me.rar
muy buen código gracias amigo
hola, muy buen aporte, pero queria saber si sabes como hacer para poner un slide de fotos en la parte de la descrpcion, estoy intentando encontrar algo asi pero nada. O sea, que donde pusiste la foto haya un slide de fotos
HOla buenas tardes,
Que se pretende hacer paginación de sliders? o no he entendido bien? Si es así, tendrás que escoger tu slider favorito e incrustarlo en el trozo de la descripción. Seguramente con algunos plugins tendrás problemas pero por ejemplo con basic jquery slider seguro que no.
Saludos
Muy buenos los ficheros de ejemplo.
Me surge la siguiente duda: ¿qué hay que hacer para que aparezca el cursor como una mano como ocurre con las etiquetas <a href ???
Gracias.
Hola,
Lo único que tienes que hacer es añadir lo siguiente al contenedor donde quieres que aparezca la mano:
.contenedor {
cursor:pointer;
}
Espero te sirva,
Saludos
Gracias, funciona correctamente.
Eres un máquina.
Excelente tutorial amigo, pero actualmente el ejemplo no funciona, por favor tu apoyo para subir el archivo para descarga, gracias por todo.
Magnifico Tutorial Jose me has resuelto un gran problema
Gracias tambien Jesus Calle lo he descargado y va de Fabula !!!
soy novato y para nada le entiendo, no seria mala idea compartir la muestra que enseñas
Primeramente esta guía para paginar esta estupenda, muchas gracias al autor, excelente aporte, veo que muchos están pidiendo los códigos, si al autor no le molesta aquí les dejo los archivos que realice siguiendo esta guía:
http://www.mediafire.com/?lsa2jfaa5av1kls
Hasta luego…
gracias bro
me parece que faltan archivos, puede ser?
Diría que el único archivo que falta es el config.php que contiene la conexión con la base de datos manteniéndola en la variable $conexion
Excelente aporte, perfecto para mi trabajo de la universidad!!!! ya que tenia una paginacion sin JQuery y esta es muchisisimo mejor ya que no hay que estar refrescando la pagina perdiendo tiempo en eso…..
amigo, puedes poner el codigo completo, por favor…!!
espero tu respuesta, gracias…!!
Hola,
Estoy intentando lo que has puesto y no me funciona. He revisado y me falta claro el script de jquery del principio. Ese script lo tienes por algún lado?
Gracias.
Te lo puedes bajar de la página oficial de jQuery o en el ejemplo en funcionamiento, ver el código fuente y guardarte el fichero.
Excelente aporte, que tendria que modificar para mostrar una tabla con 5 columnas y 5 filas por ejemplo, es decir 25 productos por pagina colocados en una tabla?
Deberías modificar el número de registros por página:
//numero de registros por página
$rowsPerPage = 5;