{"id":8724,"date":"2016-04-03T16:46:03","date_gmt":"2016-04-03T14:46:03","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=8724"},"modified":"2016-04-03T16:46:56","modified_gmt":"2016-04-03T14:46:56","slug":"paginador-en-php-y-ajax-usando-como-base-bootstrap","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/paginador-en-php-y-ajax-usando-como-base-bootstrap\/","title":{"rendered":"Paginador en PHP y AJAX usando como base Bootstrap e intercambio en JSON"},"content":{"rendered":"

En esta entrada os dejo el c\u00f3digo fuente de un paginador que emplea las tecnolog\u00edas:<\/p>\n

PHP, AJAX, JavaScript, HTML, BootStrap, CSS, MySql y JSON para el intercambio de datos.<\/p>\n

Permite paginar vuestros listados sin necesidad de refrescar la p\u00e1gina<\/strong>. Se encuentra en castellano. Dejo en la parte inferior el zip para la descarga del proyecto.<\/p>\n

<\/p>\n

C\u00f3digo HMTL<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<title>Paginacion<\/title>\r\n\t\t<meta http-equiv=\"content-type\" content=\"text\/html; charset=utf-8\">\r\n\t\t<link href=\"bootstrap\/bootstrap-3.3.5-dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\t\r\n\t\t<script src=\"jquery\/jquery-1.11.3.js\"><\/script>\t\r\n\t\t<script src=\"bootstrap\/bootstrap-3.3.5-dist\/js\/bootstrap.min.js\"><\/script>\r\n\t\t<script type=\"text\/javascript\">\r\n\r\n\t\tvar paginador;\r\n\t\tvar totalPaginas;\r\n\t\tvar itemsPorPagina = 3; \/\/ REgistros por p\u00e1gina\r\n\t\tvar numerosPorPagina = 3; \/\/ Avance entre p\u00e1ginas\r\n\r\n\t\tfunction creaPaginador(totalItems)\r\n\t\t{\r\n\t\t\tpaginador = $(\".pagination\");\r\n\r\n\t\t\ttotalPaginas = Math.ceil(totalItems\/itemsPorPagina);\r\n\r\n\t\t\t$('<li><a href=\"#\" class=\"first_link\"><<\/a><\/li>').appendTo(paginador);\r\n\t\t\t$('<li><a href=\"#\" class=\"prev_link\">\u00ab<\/a><\/li>').appendTo(paginador);\r\n\r\n\t\t\tvar pag = 0;\r\n\t\t\twhile(totalPaginas > pag)\r\n\t\t\t{\r\n\t\t\t\t$('<li><a href=\"#\" class=\"page_link\">'+(pag+1)+'<\/a><\/li>').appendTo(paginador);\r\n\t\t\t\tpag++;\r\n\t\t\t}\r\n\r\n\r\n\t\t\tif(numerosPorPagina > 1)\r\n\t\t\t{\r\n\t\t\t\t$(\".page_link\").hide();\r\n\t\t\t\t$(\".page_link\").slice(0,numerosPorPagina).show();\r\n\t\t\t}\r\n\r\n\t\t\t$('<li><a href=\"#\" class=\"next_link\">\u00bb<\/a><\/li>').appendTo(paginador);\r\n\t\t\t$('<li><a href=\"#\" class=\"last_link\">><\/a><\/li>').appendTo(paginador);\r\n\r\n\t\t\tpaginador.find(\".page_link:first\").addClass(\"active\");\r\n\t\t\tpaginador.find(\".page_link:first\").parents(\"li\").addClass(\"active\");\r\n\r\n\t\t\tpaginador.find(\".prev_link\").hide();\r\n\r\n\t\t\tpaginador.find(\"li .page_link\").click(function()\r\n\t\t\t{\r\n\t\t\t\tvar irpagina =$(this).html().valueOf()-1;\r\n\t\t\t\tcargaPagina(irpagina);\r\n\t\t\t\treturn false;\r\n\t\t\t});\r\n\r\n\t\t\tpaginador.find(\"li .first_link\").click(function()\r\n\t\t\t{\r\n\t\t\t\tvar irpagina =0;\r\n\t\t\t\tcargaPagina(irpagina);\r\n\t\t\t\treturn false;\r\n\t\t\t});\r\n\r\n\t\t\tpaginador.find(\"li .prev_link\").click(function()\r\n\t\t\t{\r\n\t\t\t\tvar irpagina =parseInt(paginador.data(\"pag\")) -1;\r\n\t\t\t\tcargaPagina(irpagina);\r\n\t\t\t\treturn false;\r\n\t\t\t});\r\n\r\n\t\t\tpaginador.find(\"li .next_link\").click(function()\r\n\t\t\t{\r\n\t\t\t\tvar irpagina =parseInt(paginador.data(\"pag\")) +1;\r\n\t\t\t\tcargaPagina(irpagina);\r\n\t\t\t\treturn false;\r\n\t\t\t});\r\n\r\n\t\t\tpaginador.find(\"li .last_link\").click(function()\r\n\t\t\t{\r\n\t\t\t\tvar irpagina =totalPaginas -1;\r\n\t\t\t\tcargaPagina(irpagina);\r\n\t\t\t\treturn false;\r\n\t\t\t});\r\n\r\n\t\t\tcargaPagina(0);\r\n\r\n\r\n\r\n\r\n\t\t}\r\n\r\n\t\tfunction cargaPagina(pagina)\r\n\t\t{\r\n\t\t\tvar desde = pagina * itemsPorPagina;\r\n\r\n\t\t\t$.ajax({\r\n\t\t\t\tdata:{\"param1\":\"dame\",\"limit\":itemsPorPagina,\"offset\":desde},\r\n\t\t\t\ttype:\"GET\",\r\n\t\t\t\tdataType:\"json\",\r\n\t\t\t\turl:\"conexion.php\"\r\n\t\t\t}).done(function(data,textStatus,jqXHR){\r\n\r\n\t\t\t\tvar lista = data.lista;\r\n\r\n\t\t\t\t$(\"#miTabla\").html(\"\");\r\n\r\n\t\t\t\t$.each(lista, function(ind, elem){\r\n\r\n\t\t\t\t\t$(\"<tr>\"+\r\n\t\t\t\t\t\t\"<td>\"+elem.id+\"<\/td>\"+\r\n\t\t\t\t\t\t\"<td>\"+elem.nombre+\"<\/td>\"+\r\n\t\t\t\t\t\t\"<td>\"+elem.apellidopaterno+\"<\/td>\"+\r\n\t\t\t\t\t\t\"<td>\"+elem.apellidomaterno+\"<\/td>\"+\r\n\t\t\t\t\t\t\"<\/tr>\").appendTo($(\"#miTabla\"));\r\n\r\n\r\n\t\t\t\t});\t\t\t\r\n\r\n\r\n\t\t\t}).fail(function(jqXHR,textStatus,textError){\r\n\t\t\t\talert(\"Error al realizar la peticion dame\".textError);\r\n\r\n\t\t\t});\r\n\r\n\t\t\tif(pagina >= 1)\r\n\t\t\t{\r\n\t\t\t\tpaginador.find(\".prev_link\").show();\r\n\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t{\r\n\t\t\t\tpaginador.find(\".prev_link\").hide();\r\n\t\t\t}\r\n\r\n\r\n\t\t\tif(pagina <(totalPaginas- numerosPorPagina))\r\n\t\t\t{\r\n\t\t\t\tpaginador.find(\".next_link\").show();\r\n\t\t\t}else\r\n\t\t\t{\r\n\t\t\t\tpaginador.find(\".next_link\").hide();\r\n\t\t\t}\r\n\r\n\t\t\tpaginador.data(\"pag\",pagina);\r\n\r\n\t\t\tif(numerosPorPagina>1)\r\n\t\t\t{\r\n\t\t\t\t$(\".page_link\").hide();\r\n\t\t\t\tif(pagina < (totalPaginas- numerosPorPagina))\r\n\t\t\t\t{\r\n\t\t\t\t\t$(\".page_link\").slice(pagina,numerosPorPagina + pagina).show();\r\n\t\t\t\t}\r\n\t\t\t\telse{\r\n\t\t\t\t\tif(totalPaginas > numerosPorPagina)\r\n\t\t\t\t\t\t$(\".page_link\").slice(totalPaginas- numerosPorPagina).show();\r\n\t\t\t\t\telse\r\n\t\t\t\t\t\t$(\".page_link\").slice(0).show();\r\n\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tpaginador.children().removeClass(\"active\");\r\n\t\t\tpaginador.children().eq(pagina+2).addClass(\"active\");\r\n\r\n\r\n\t\t}\r\n\r\n\r\n\t\t$(function()\r\n\t\t{\r\n\r\n\t\t\t$.ajax({\r\n\r\n\t\t\t\tdata:{\"param1\":\"cuantos\"},\r\n\t\t\t\ttype:\"GET\",\r\n\t\t\t\tdataType:\"json\",\r\n\t\t\t\turl:\"conexion.php\"\r\n\t\t\t}).done(function(data,textStatus,jqXHR){\r\n\t\t\t\tvar total = data.total;\r\n\r\n\t\t\t\tcreaPaginador(total);\r\n\r\n\r\n\t\t\t}).fail(function(jqXHR,textStatus,textError){\r\n\t\t\t\talert(\"Error al realizar la peticion cuantos\".textError);\r\n\r\n\t\t\t});\r\n\r\n\r\n\r\n\t\t});\r\n\r\n\r\n\r\n\t\t<\/script>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<div class=\"panel panel-primary\"> \r\n\t\t\t<div class=\"panel-heading\">este es el encabezado del panel<\/div>\r\n\t\t\t<div class=\"panel-body\">\r\n\t\t\t\t<table class=\"table table-striped table-hover\">\r\n\t\t\t\t\t<thead>\r\n\t\t\t\t\t  <tr>\r\n\t\t\t\t\t\t<th>elemento<\/th>\r\n\t\t\t\t\t\t<th>Nombre<\/th>\r\n\t\t\t\t\t\t<th>Apellido Paterno<\/th>\r\n\t\t\t\t\t\t<th>Apellido Materno<\/th>\r\n\t\t\t\t\t  <\/tr>\r\n\t\t\t\t\t<\/thead>\r\n\t\t\t\t\t<tbody id=\"miTabla\">\r\n\r\n\t\t\t\t\t<\/tbody>\r\n\t\t\t\t<\/table>\r\n\r\n\t\t\t\t<div class=\"col-md-12 text-center\">\r\n\t\t\t\t\t<ul class=\"pagination\" id=\"paginador\"><\/ul>\r\n\t\t\t\t<\/div>\r\n\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"panel-footer\">pie del panel<\/div>\r\n\t\t<\/div>\r\n\t<\/body>\r\n<\/html><\/pre>\n
 <\/p>\n
C\u00f3digo en PHP<\/p>\n
<?php\r\n$mysqli= new mysqli(\"localhost\",\"root\",\"\",\"ejemplotablas\");\r\n\r\nif($mysqli ->connect_errno)\r\n{\r\n\techo \"Fallo al conectar\".$mysqli->connect_errno;\r\n}\r\nelse\r\n{\r\n\r\n\t$mysqli->set_charset(\"utf8\"); \/\/ Juego de caracteres castellano\r\n\r\n\t$jsondata = array(); \r\n\t$jsondataList = array();\r\n\r\n\tif($_GET['param1']==\"cuantos\")   \/\/ Obtener el numero de registros\r\n\t{\r\n\r\n\t\t$myquery = \"SELECT COUNT(*) total FROM tabla1\";\r\n\r\n\t\t$resultado = $mysqli->query($myquery);\r\n\r\n\t\t$fila = $resultado ->fetch_assoc();\r\n\r\n\t\t$jsondata['total'] = $fila['total']; \/\/ Guardamos el resultado para despues condificarlo en JSON\r\n\t}\r\n\telseif($_GET[\"param1\"]==\"dame\")\r\n\t{\r\n\t\t$myquery = \"SELECT * FROM tabla1 LIMIT \".$mysqli->real_escape_string($_GET['limit']).\" OFFSET \".$mysqli->real_escape_string($_GET[\"offset\"]);\r\n\r\n\t\t$resultado = $mysqli->query($myquery);\r\n\t\twhile($fila = $resultado ->fetch_assoc())\r\n\t\t{\r\n\t\t\t$jsondataperson = array();\r\n\t\t\t$jsondataperson[\"id\"] = $fila[\"id\"];\r\n\t\t\t$jsondataperson[\"nombre\"] = $fila[\"nombre\"];\r\n\t\t\t$jsondataperson[\"apellidopaterno\"] = $fila[\"apellidopaterno\"];\r\n\t\t\t$jsondataperson[\"apellidomaterno\"] = $fila[\"apellidomaterno\"];\r\n\r\n\t\t\t$jsondataList[]=$jsondataperson;\r\n\r\n\t\t}\r\n\r\n\t\t$jsondata[\"lista\"] = array_values($jsondataList);\r\n\t}\r\n\r\nheader(\"Content-type:application\/json; charset = utf-8\"); \/\/ Decimos que la informacion de retorno es json en utf\r\necho json_encode($jsondata); \/\/ Codificamos la informacion del array en JSON\r\nexit();\r\n}\r\n\r\n?><\/pre>\n
C\u00f3digo ejemplo.sql<\/p>\n
-- phpMyAdmin SQL Dump\r\n-- version 4.1.14\r\n-- http:\/\/www.phpmyadmin.net\r\n--\r\n-- Servidor: 127.0.0.1\r\n-- Versi\u00f3n del servidor: 5.6.17\r\n-- Versi\u00f3n de PHP: 5.5.12\r\n\r\nSET SQL_MODE = \"NO_AUTO_VALUE_ON_ZERO\";\r\nSET time_zone = \"+00:00\";\r\n\r\n\r\n\/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT *\/;\r\n\/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS *\/;\r\n\/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION *\/;\r\n\/*!40101 SET NAMES utf8 *\/;\r\n\r\n--\r\n-- Base de datos: `ejemplotablas`\r\n--\r\nCREATE DATABASE IF NOT EXISTS `ejemplotablas` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;\r\nUSE `ejemplotablas`;\r\n\r\n-- --------------------------------------------------------\r\n\r\n--\r\n-- Estructura de tabla para la tabla `tabla1`\r\n--\r\n\r\nCREATE TABLE IF NOT EXISTS `tabla1` (\r\n  `id` int(11) NOT NULL AUTO_INCREMENT,\r\n  `nombre` varchar(50) NOT NULL,\r\n  `apellidopaterno` varchar(50) NOT NULL,\r\n  `apellidomaterno` varchar(50) NOT NULL,\r\n  PRIMARY KEY (`id`)\r\n) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=21 ;\r\n\r\n--\r\n-- Volcado de datos para la tabla `tabla1`\r\n--\r\n\r\nINSERT INTO `tabla1` (`id`, `nombre`, `apellidopaterno`, `apellidomaterno`) VALUES\r\n(1, 'pedro', 'anero', 'lopez'),\r\n(2, 'juan', 'carlos', 'salu'),\r\n(3, 'oscar', 'de la cuesta', 'campillo'),\r\n(4, 'julio', 'rodriguez', 'martinez'),\r\n(5, 'marta', 'sanchez', 'mendoza'),\r\n(6, 'joaquin', 'diaz', 'alvarado'),\r\n(7, 'guillermo', 'montez', 'roma'),\r\n(8, 'arturo', 'santos', 'cruz'),\r\n(9, 'fernando', 'radilla', 'cortes'),\r\n(10, 'tomas', 'flores', 'mendez'),\r\n(11, 'lucas', 'trujillo', 'Aurea'),\r\n(12, 'Daniel', 'Rivas', 'Alevra'),\r\n(13, 'Luis', 'Torres', 'Mendoza'),\r\n(14, 'Daniel', 'Romay', 'Huerta'),\r\n(15, 'pedro', 'Nieto', 'Garcia'),\r\n(16, 'Jaime', 'Rojas', 'Cepeda'),\r\n(17, 'veronica', 'Toledo', 'Carrillo'),\r\n(18, 'Bea', 'Andrada', 'Martinez'),\r\n(19, 'Raul', 'Rios', 'Mu\u00f1oz'),\r\n(20, 'Marcos', 'Gamboa', 'Peralta');\r\n<\/pre>\n
Enlace de descarga del proyecto EJEMPLO:<\/strong><\/p>\n
http:\/\/www.palentino.es\/rars\/Paginador PHP-AJAX.rar<\/a><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
En esta entrada os dejo el c\u00f3digo fuente de un paginador que emplea las tecnolog\u00edas: PHP, AJAX, JavaScript, HTML, BootStrap, CSS, MySql y JSON para el intercambio de datos. Permite paginar vuestros listados sin necesidad de refrescar la p\u00e1gina. Se encuentra en castellano. Dejo en la parte inferior el zip para la descarga del proyecto.<\/p>\n","protected":false},"author":1,"featured_media":7088,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46,5],"tags":[],"class_list":["post-8724","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","category-programacion"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=8724"}],"version-history":[{"count":3,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8724\/revisions"}],"predecessor-version":[{"id":8727,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8724\/revisions\/8727"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/7088"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=8724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=8724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=8724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}