{"id":1721,"date":"2012-02-23T13:38:41","date_gmt":"2012-02-23T13:38:41","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1721"},"modified":"2012-11-05T14:45:02","modified_gmt":"2012-11-05T14:45:02","slug":"css-pagination","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/","title":{"rendered":"Estilo para la paginaci\u00f3n de resultados"},"content":{"rendered":"<p>Cuando tenemos muchos registros y no queremos mostrar una lista de registro muy larga podemos usar paginaci\u00f3n para mostrar los resultados de la consulta en distintas p\u00e1ginas.<\/p>\n<p>En muchas ocasiones, cuando se presentan en una p\u00e1gina web registros de una base de datos, se deber\u00edan mostrar demasiados registros como para colocarlos todos en una \u00fanica p\u00e1gina. En estas ocasiones se suele paginar los resultados, quiz\u00e1s cientos, en distintas p\u00e1ginas con conjuntos de registros mucho menos numerosos. Por ejemplo, podr\u00edamos 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 habremos podido observar repetidas veces en los buscadores.<\/p>\n<p>En este art\u00edculo \u00fanicamente detalleremos un posible estilo de dise\u00f1o para el paginador, es decir, los n\u00fameros que aparecen arriba o abajo de los registros encontrados.<\/p>\n<p>Si desea obtener m\u00e1s informaci\u00f3n sobre la paginaci\u00f3n de registros en t\u00e9rminos de PHP y MySQL puede visitar los siguientes art\u00edculos:<\/p>\n<p><a href=\"..\/paginacion-resultados-con-php\/\" rel=\"bookmark\">Paginaci\u00f3n de resultados con PHP<\/a><\/p>\n<p><a href=\"..\/paginacion-php\/\" rel=\"bookmark\">Paginaci\u00f3n de resultados con PHP versi\u00f3n 2<\/a><\/p>\n<p><a href=\"..\/paginar-consultas-con-php-mysql-y-ajax\/\" rel=\"bookmark\">Paginaci\u00f3n de consultas con PHP, MySQL y AJAX<\/a><\/p>\n<p>Para a\u00f1adir estilos a estos paginadores de resultados debemos aplicar t\u00e9cnicas CSS y podemos conseguir efectos como por ejemplo el de la imagen siguiente:<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/pagination.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1723\" title=\"pagination\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/pagination-300x35.png\" alt=\"\" width=\"300\" height=\"35\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/pagination-300x35.png 300w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/pagination.png 405w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>En nuestra hoja de estilos deberemos tener algo como esto:<\/p>\n<pre>.pagination {\r\n\u00a0\u00a0\u00a0 height: 36px;\r\n\u00a0\u00a0\u00a0 margin: 18px 0;\r\n}\r\n.pagination ul {\r\n\u00a0\u00a0\u00a0 border-radius: 3px 3px 3px 3px;\r\n\u00a0\u00a0\u00a0 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\r\n\u00a0\u00a0\u00a0 display: inline-block;\r\n\u00a0\u00a0\u00a0 margin-bottom: 0;\r\n\u00a0\u00a0\u00a0 margin-left: 0;\r\n}\r\n.pagination li {\r\n\u00a0\u00a0\u00a0 display: inline;\r\n}\r\n.pagination a {\r\n\u00a0\u00a0\u00a0 -moz-border-bottom-colors: none;\r\n\u00a0\u00a0\u00a0 -moz-border-image: none;\r\n\u00a0\u00a0\u00a0 -moz-border-left-colors: none;\r\n\u00a0\u00a0\u00a0 -moz-border-right-colors: none;\r\n\u00a0\u00a0\u00a0 -moz-border-top-colors: none;\r\n\u00a0\u00a0\u00a0 border-color: #DDDDDD;\r\n\u00a0\u00a0\u00a0 border-style: solid;\r\n\u00a0\u00a0\u00a0 border-width: 1px 1px 1px 0;\r\n\u00a0\u00a0\u00a0 float: left;\r\n\u00a0\u00a0\u00a0 line-height: 34px;\r\n\u00a0\u00a0\u00a0 padding: 0 14px;\r\n\u00a0\u00a0\u00a0 text-decoration: none;\r\n}\r\n.pagination a:hover, .pagination .active a {\r\n\u00a0\u00a0\u00a0 background-color: #F5F5F5;\r\n}\r\n.pagination .active a {\r\n\u00a0\u00a0\u00a0 color: #999999;\r\n\u00a0\u00a0\u00a0 cursor: default;\r\n}\r\n.pagination .disabled a, .pagination .disabled a:hover {\r\n\u00a0\u00a0\u00a0 background-color: transparent;\r\n\u00a0\u00a0\u00a0 color: #999999;\r\n\u00a0\u00a0\u00a0 cursor: default;\r\n}\r\n.pagination li:first-child a {\r\n\u00a0\u00a0\u00a0 border-left-width: 1px;\r\n\u00a0\u00a0\u00a0 border-radius: 3px 0 0 3px;\r\n}\r\n.pagination li:last-child a {\r\n\u00a0\u00a0\u00a0 border-radius: 0 3px 3px 0;\r\n}\r\n.pagination-centered {\r\n\u00a0\u00a0\u00a0 text-align: center;\r\n}\r\n.pagination-right {\r\n\u00a0\u00a0\u00a0 text-align: right;\r\n}<\/pre>\n<p>Esta hoja de estilo la deberemos incluir en nuestro &lt;head&gt; de la forma habitual y seguidamente en el &lt;body&gt; a\u00f1adir los siguientes tags:<\/p>\n<pre>&lt;div class=\"pagination\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;ul&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"?page=3\"&gt;Anterior&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"?page=1\"&gt;1&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"?page=2\"&gt;2&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"?page=3\"&gt;3&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a&gt;4&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"?page=5\"&gt;5&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"?page=6\"&gt;6&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"?page=10\"&gt;10&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;li&gt;&lt;a href=\"?page=5\"&gt;Siguiente&lt;\/a&gt;&lt;\/li&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/ul&gt;\r\n\u00a0\u00a0 &lt;\/div&gt;<\/pre>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/pagination\/\">Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando tenemos muchos registros y no queremos mostrar una lista de registro muy larga podemos usar paginaci\u00f3n para mostrar los resultados de la consulta en distintas p\u00e1ginas. En muchas ocasiones, cuando se presentan en una p\u00e1gina web registros de una base de datos, se deber\u00edan mostrar demasiados registros como para colocarlos todos en una \u00fanica [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[34],"class_list":["post-1721","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-paginacion"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Estilo para la paginaci\u00f3n de resultados - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Estilo para la paginaci\u00f3n de resultados - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Cuando tenemos muchos registros y no queremos mostrar una lista de registro muy larga podemos usar paginaci\u00f3n para mostrar los resultados de la consulta en distintas p\u00e1ginas. En muchas ocasiones, cuando se presentan en una p\u00e1gina web registros de una base de datos, se deber\u00edan mostrar demasiados registros como para colocarlos todos en una \u00fanica [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-02-23T13:38:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-11-05T14:45:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\" \/>\n\t<meta property=\"og:image:width\" content=\"282\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/\",\"name\":\"Estilo para la paginaci\u00f3n de resultados - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"datePublished\":\"2012-02-23T13:38:41+00:00\",\"dateModified\":\"2012-11-05T14:45:02+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"width\":282,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Estilo para la paginaci\u00f3n de resultados\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Estilo para la paginaci\u00f3n de resultados - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Estilo para la paginaci\u00f3n de resultados - Jose Aguilar Blog","og_description":"Cuando tenemos muchos registros y no queremos mostrar una lista de registro muy larga podemos usar paginaci\u00f3n para mostrar los resultados de la consulta en distintas p\u00e1ginas. En muchas ocasiones, cuando se presentan en una p\u00e1gina web registros de una base de datos, se deber\u00edan mostrar demasiados registros como para colocarlos todos en una \u00fanica [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-02-23T13:38:41+00:00","article_modified_time":"2012-11-05T14:45:02+00:00","og_image":[{"width":282,"height":300,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/","url":"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/","name":"Estilo para la paginaci\u00f3n de resultados - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","datePublished":"2012-02-23T13:38:41+00:00","dateModified":"2012-11-05T14:45:02+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","width":282,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/css-pagination\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Estilo para la paginaci\u00f3n de resultados"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=1721"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1721\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6469"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}