{"id":2444,"date":"2012-03-30T15:29:33","date_gmt":"2012-03-30T15:29:33","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2444"},"modified":"2019-04-09T10:21:54","modified_gmt":"2019-04-09T10:21:54","slug":"paginacion-jquery-ajax-php","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/paginacion-jquery-ajax-php\/","title":{"rendered":"Paginaci\u00f3n de resultados con jQuery, Ajax y PHP"},"content":{"rendered":"

La paginaci\u00f3n de resultados<\/strong> se hace necesaria a medida que tenemos grandes cantidades de registros que mostrar.<\/p>\n

En este art\u00edculo vamos a explicar una versi\u00f3n mejorada sobre la paginaci\u00f3n de resultados<\/strong> pero esta vez vamos a utilizar las tecnolog\u00edas: jQuery, Ajax, PHP y MySQLi<\/strong>.<\/p>\n

Cuando tenemos muchos registros y no queremos mostrar una lista de registro muy larga podemos usar paginaci\u00f3n<\/strong> para mostrar los resultados de la consulta en distintas p\u00e1ginas.<\/p>\n

Cuando se presentan en una p\u00e1gina web registros crecientes de una tabla de una base de datos en formato listado, en la mayor\u00eda de los casos acaban siendo demasiados registros como para colocarlos todos en una misma p\u00e1gina. En estas ocasiones se suele paginar los resultados<\/strong>, quiz\u00e1s cientos, en distintas p\u00e1ginas con conjuntos de registros mucho menos numerosos.<\/p>\n

Por ejemplo, podemos presentar los resultados en p\u00e1ginas de 10 elementos o 20, dependiendo de nuestras intenciones y el tipo de datos que se est\u00e9n presentando. Este efecto lo has podido observar repetidas veces en los buscadores.<\/p>\n

En este art\u00edculo vamos a ilustrar un ejemplo en el que vamos a tener m\u00e1s de 100 productos de nuestra tienda que estamos leyendo de la base de datos y hemos decidido mostrarlos de 6 en 6.<\/p>\n

La paginaci\u00f3n<\/strong> se puede hacer solo con PHP<\/strong> pero, en este caso, cada vez que se pulsa en un n\u00famero de p\u00e1gina se recarga la p\u00e1gina. Quiz\u00e1 no te interesa eso por cuestiones de usabilidad y de hacer esperar al usuario para ver m\u00e1s resultados. En esta entrada vamos a ver como aplicarle jQuery<\/strong> y Ajax<\/strong> para paginar resultados sin recargar la p\u00e1gina<\/strong> de nuevo.<\/p>\n

Esta entrada ha sido actualizada el 16\/07\/2018 aportando toda la experiencia, profesionalidad y compromiso que hemos adquirido en el transcurso del tiempo.<\/em><\/p>\n

En el archivo principal o index.php, dentro del <head> debes agregar los scripts y estilos necesarios para hacer funcionar la paginaci\u00f3n:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"css\/styles.css"<\/span>><\/span>\n<script<\/span><\/a> src<\/span>=<\/span>"https:\/\/code.jquery.com\/jquery-3.2.1.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Tan solo agregamos estilos propios del ejemplo y la librer\u00eda jQuery<\/strong>. En el ejemplo en funcionamiento, para el aspecto visual tambi\u00e9n nos apoyamos en la tecnolog\u00eda Bootstrap<\/strong> para no tener que aplicar muchos estilos propios. De esta forma nos ahorramos mucho trabajo.<\/p>\n
En el archivo principal o index.php es importante agregar el siguiente c\u00f3digo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span> \nrequire<\/span>(<\/span>'config.php'<\/span>)<\/span>;<\/span>\n$result<\/span> =<\/span> $connexion<\/span>-><\/span>query<\/span>(<\/span>'SELECT COUNT(*) as total_products FROM product WHERE active = 1'<\/span>)<\/span>;<\/span>\n$row<\/span> =<\/span> $result<\/span>-><\/span>fetch_assoc<\/span>(<\/span>)<\/span>;<\/span>\n$num_total_rows<\/span> =<\/span> $row<\/span>[<\/span>'total_products'<\/span>]<\/span>;<\/span>\n?><\/span><\/pre><\/div><\/div>\n
Requerimos del archivo \u00abconfig.php\u00bb que tan solo conecta con la base de datos utilizando la tecnolog\u00eda MySQLi<\/strong> y dispone del n\u00famero de elementos que queremos para cada p\u00e1gina. Este archivo contiene:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\ndefine<\/span><\/a>(<\/span>'DB_SERVER'<\/span>,<\/span> 'localhost'<\/span>)<\/span>;<\/span>\ndefine<\/span><\/a>(<\/span>'DB_SERVER_USERNAME'<\/span>,<\/span> 'YOUR USERNAME'<\/span>)<\/span>;<\/span>\ndefine<\/span><\/a>(<\/span>'DB_SERVER_PASSWORD'<\/span>,<\/span> 'YOUR PASSWORD'<\/span>)<\/span>;<\/span>\ndefine<\/span><\/a>(<\/span>'DB_DATABASE'<\/span>,<\/span> 'YOUR DATABASE'<\/span>)<\/span>;<\/span>\ndefine<\/span><\/a>(<\/span>'NUM_ITEMS_BY_PAGE'<\/span>,<\/span> 6)<\/span>;<\/span>\n \n$connexion<\/span> =<\/span> new<\/span> mysqli(<\/span>DB_SERVER,<\/span> DB_SERVER_USERNAME,<\/span> DB_SERVER_PASSWORD,<\/span> DB_DATABASE)<\/span>;<\/span>\n?><\/span><\/pre><\/div><\/div>\n
Despu\u00e9s tan solo hacemos una consulta a la base de datos para saber el n\u00famero de productos que hay activos que ser\u00e1 un par\u00e1metro importante para el n\u00famero de p\u00e1ginas.<\/p>\n
Dentro del <body> debes agregar el c\u00f3digo que recorre los primeros registros y los muestra en pantalla, adem\u00e1s de los n\u00fameros de paginaci\u00f3n<\/strong>:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\n\/\/Si hay registros<\/span>\nif<\/span> (<\/span>$num_total_rows<\/span> ><\/span> 0)<\/span> {<\/span>\n    $num_pages<\/span> =<\/span> ceil<\/span><\/a>(<\/span>$num_total_rows<\/span> \/<\/span> NUM_ITEMS_BY_PAGE)<\/span>;<\/span>\n    $result<\/span> =<\/span> $connexion<\/span>-><\/span>query<\/span>(<\/span>\n        'SELECT * FROM product p \n        LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1) \n        LEFT JOIN image i ON (i.id_product = p.id_product AND cover = 1) \n        WHERE active = 1 \n        ORDER BY date_upd DESC \n        LIMIT 0, '<\/span>.<\/span>NUM_ITEMS_BY_PAGE\n    )<\/span>;<\/span>\n    if<\/span> (<\/span>$result<\/span>-><\/span>num_rows<\/span> ><\/span> 0)<\/span> {<\/span>\n        echo<\/span> '<ul class="row items">'<\/span>;<\/span>\n        while<\/span> (<\/span>$row<\/span> =<\/span> $result<\/span>-><\/span>fetch_assoc<\/span>(<\/span>)<\/span>)<\/span> {<\/span>\n            echo<\/span> '<li class="col-lg-4">'<\/span>;<\/span>\n            echo<\/span> '<div class="item">'<\/span>;<\/span>\n            echo<\/span> '<h3>'<\/span>.<\/span>$row<\/span>[<\/span>'name'<\/span>]<\/span>.<\/span>'<\/h3>'<\/span>;<\/span>\n            ...<\/span>\n            echo<\/span> '<\/div>'<\/span>;<\/span>\n            echo<\/span> '<\/li>'<\/span>;<\/span>\n \n        }<\/span>\n        echo<\/span> '<\/ul>'<\/span>;<\/span>\n    }<\/span>\n \n    if<\/span> (<\/span>$num_pages<\/span> ><\/span> 1)<\/span> {<\/span>\n        echo<\/span> '<div class="row">'<\/span>;<\/span>\n        echo<\/span> '<div class="col-lg-12">'<\/span>;<\/span>\n        echo<\/span> '<nav aria-label="Page navigation example">'<\/span>;<\/span>\n        echo<\/span> '<ul class="pagination justify-content-end">'<\/span>;<\/span>\n \n        for<\/span> (<\/span>$i<\/span>=<\/span>1<\/span>;<\/span>$i<\/span><=<\/span>$num_pages<\/span>;<\/span>$i<\/span>++<\/span>)<\/span> {<\/span>\n            $class_active<\/span> =<\/span> ''<\/span>;<\/span>\n            if<\/span> (<\/span>$i<\/span> ==<\/span> 1)<\/span> {<\/span>\n                $class_active<\/span> =<\/span> 'active'<\/span>;<\/span>\n            }<\/span>\n            echo<\/span> '<li class="page-item '<\/span>.<\/span>$class_active<\/span>.<\/span>'"><a class="page-link" href="#" data="'<\/span>.<\/span>$i<\/span>.<\/span>'">'<\/span>.<\/span>$i<\/span>.<\/span>'<\/a><\/li>'<\/span>;<\/span>\n        }<\/span>\n \n        echo<\/span> '<\/ul>'<\/span>;<\/span>\n        echo<\/span> '<\/nav>'<\/span>;<\/span>\n        echo<\/span> '<\/div>'<\/span>;<\/span>\n        echo<\/span> '<\/div>'<\/span>;<\/span>\n    }<\/span>\n}<\/span>\n?><\/span><\/pre><\/div><\/div>\n
Finalmente dentro del <head> o justo debajo de la etiqueta de cierre <\/body> puedes agregar el controlador del evento:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script type=<\/span>"text\/javascript"<\/span>><\/span>\n$(<\/span>document)<\/span>.ready<\/span>(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\t\n    $(<\/span>'.pagination li a'<\/span>)<\/span>.on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\n        $(<\/span>'.items'<\/span>)<\/span>.html<\/span>(<\/span>'<div class="loading"><img src="images\/loading.gif" width="70px" height="70px"\/><br\/>Un momento por favor...<\/div>'<\/span>)<\/span>;<\/span>\n \n        var<\/span> page =<\/span> $(<\/span>this<\/span>)<\/span>.attr<\/span>(<\/span>'data'<\/span>)<\/span>;<\/span>\t\t\n        var<\/span> dataString =<\/span> 'page='<\/span>+<\/span>page;<\/span>\n \n        $.ajax<\/span>(<\/span>{<\/span>\n            type:<\/span> "GET"<\/span>,<\/span>\n            url:<\/span> "ajax.php"<\/span>,<\/span>\n            data:<\/span> dataString,<\/span>\n            success:<\/span> function<\/span>(<\/span>data)<\/span> {<\/span>\n                $(<\/span>'.items'<\/span>)<\/span>.fadeIn<\/span>(<\/span>2000)<\/span>.html<\/span>(<\/span>data)<\/span>;<\/span>\n                $(<\/span>'.pagination li'<\/span>)<\/span>.removeClass<\/span>(<\/span>'active'<\/span>)<\/span>;<\/span>\n                $(<\/span>'.pagination li a[data="'<\/span>+<\/span>page+<\/span>'"]'<\/span>)<\/span>.parent<\/span>(<\/span>)<\/span>.addClass<\/span>(<\/span>'active'<\/span>)<\/span>;<\/span>\n            }<\/span>\n        }<\/span>)<\/span>;<\/span>\n        return<\/span> false<\/span>;<\/span>\n    }<\/span>)<\/span>;<\/span>              \n}<\/span>)<\/span>;<\/span>    \n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
El c\u00f3digo anterior lo que hace es esperar a que alg\u00fan n\u00famero del bloque de paginaci\u00f3n<\/strong> sea clikeado para ejecutar el proceso de paginaci\u00f3n<\/strong>.<\/p>\n
Por cada enlace de la paginaci\u00f3n<\/strong> 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\u00a0paginaci\u00f3n<\/strong>), recogemos el par\u00e1metro que nos indica el n\u00famero de p\u00e1gina que el usuario quiere ver y, luego, mediante la t\u00e9cnica Ajax<\/strong> hacemos una llamada as\u00edncrona al archivo \u00abajax.php\u00bb pas\u00e1ndole el n\u00famero de p\u00e1gina usando el m\u00e9todo GET.<\/p>\n
Mediante el success del ajax depositamos la informaci\u00f3n que nos env\u00eda el archivo \u00abajax.php\u00bb en el contenedor deseado y activamos el n\u00famero de p\u00e1gina en el que se ha hecho click.<\/p>\n
El archivo \u00abajax.php\u00bb se encarga de retornar los productos que hay en la p\u00e1gina escogida. Puedes ver el c\u00f3digo a continuaci\u00f3n:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<?php<\/span>\nrequire_once<\/span>(<\/span>'config.php'<\/span>)<\/span>;<\/span>\n \n$html<\/span> =<\/span> ''<\/span>;<\/span>\n$page<\/span> =<\/span> $_GET<\/span>[<\/span>'page'<\/span>]<\/span>;<\/span>\n$rowsPerPage<\/span> =<\/span> NUM_ITEMS_BY_PAGE;<\/span>\n$offset<\/span> =<\/span> (<\/span>$page<\/span> -<\/span> 1)<\/span> *<\/span> $rowsPerPage<\/span>;<\/span>\nsleep<\/span><\/a>(<\/span>1)<\/span>;<\/span>\n \n$result<\/span> =<\/span> $connexion<\/span>-><\/span>query<\/span>(<\/span>\n    'SELECT * FROM product p \n    LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1) \n    LEFT JOIN `image` i ON (i.id_product = p.id_product AND cover = 1) \n    WHERE active = 1 \n    ORDER BY date_upd DESC LIMIT '<\/span>.<\/span>$offset<\/span>.<\/span>', '<\/span>.<\/span>$rowsPerPage<\/span>\n)<\/span>;<\/span>\nif<\/span> (<\/span>$result<\/span>-><\/span>num_rows<\/span> ><\/span> 0)<\/span> {<\/span>\n    while<\/span> (<\/span>$row<\/span> =<\/span> $result<\/span>-><\/span>fetch_assoc<\/span>(<\/span>)<\/span>)<\/span> {<\/span>\n        $html<\/span> .=<\/span> '<li class="col-lg-4">'<\/span>;<\/span>\n        $html<\/span> .=<\/span> '<div class="item">'<\/span>;<\/span>\n        $html<\/span> .=<\/span> '<h3>'<\/span>.<\/span>$row<\/span>[<\/span>'name'<\/span>]<\/span>.<\/span>'<\/h3>'<\/span>;<\/span>\n        ...<\/span>\n        $html<\/span> .=<\/span> '<\/div>'<\/span>;<\/span>\n        $html<\/span> .=<\/span> '<\/li>'<\/span>;<\/span>\n    }<\/span>\n}<\/span>\n \necho<\/span> $html<\/span>;<\/span>\n?><\/span><\/pre><\/div><\/div>\n
Qu\u00e9 hace este c\u00f3digo?<\/p>\n