Twitter Flickr Pinterest LinkedIn YouTube Google Maps E-mail RSS
formats

Paginador en PHP y AJAX usando como base Bootstrap e intercambio en JSON

Publicado en 3 abril, 2016, por en PHP, Programación.
LinkedInPinPrint

En esta entrada os dejo el código fuente de un paginador que emplea las tecnologías:

PHP, AJAX, JavaScript, HTML, BootStrap, CSS, MySql y JSON para el intercambio de datos.

Permite paginar vuestros listados sin necesidad de refrescar la página. Se encuentra en castellano. Dejo en la parte inferior el zip para la descarga del proyecto.

Código HMTL

<!DOCTYPE html>
<html>
	<head>
		<title>Paginacion</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<link href="bootstrap/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">	
		<script src="jquery/jquery-1.11.3.js"></script>	
		<script src="bootstrap/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
		<script type="text/javascript">

		var paginador;
		var totalPaginas;
		var itemsPorPagina = 3; // REgistros por página
		var numerosPorPagina = 3; // Avance entre páginas

		function creaPaginador(totalItems)
		{
			paginador = $(".pagination");

			totalPaginas = Math.ceil(totalItems/itemsPorPagina);

			$('<li><a href="#" class="first_link"><</a></li>').appendTo(paginador);
			$('<li><a href="#" class="prev_link">«</a></li>').appendTo(paginador);

			var pag = 0;
			while(totalPaginas > pag)
			{
				$('<li><a href="#" class="page_link">'+(pag+1)+'</a></li>').appendTo(paginador);
				pag++;
			}


			if(numerosPorPagina > 1)
			{
				$(".page_link").hide();
				$(".page_link").slice(0,numerosPorPagina).show();
			}

			$('<li><a href="#" class="next_link">»</a></li>').appendTo(paginador);
			$('<li><a href="#" class="last_link">></a></li>').appendTo(paginador);

			paginador.find(".page_link:first").addClass("active");
			paginador.find(".page_link:first").parents("li").addClass("active");

			paginador.find(".prev_link").hide();

			paginador.find("li .page_link").click(function()
			{
				var irpagina =$(this).html().valueOf()-1;
				cargaPagina(irpagina);
				return false;
			});

			paginador.find("li .first_link").click(function()
			{
				var irpagina =0;
				cargaPagina(irpagina);
				return false;
			});

			paginador.find("li .prev_link").click(function()
			{
				var irpagina =parseInt(paginador.data("pag")) -1;
				cargaPagina(irpagina);
				return false;
			});

			paginador.find("li .next_link").click(function()
			{
				var irpagina =parseInt(paginador.data("pag")) +1;
				cargaPagina(irpagina);
				return false;
			});

			paginador.find("li .last_link").click(function()
			{
				var irpagina =totalPaginas -1;
				cargaPagina(irpagina);
				return false;
			});

			cargaPagina(0);




		}

		function cargaPagina(pagina)
		{
			var desde = pagina * itemsPorPagina;

			$.ajax({
				data:{"param1":"dame","limit":itemsPorPagina,"offset":desde},
				type:"GET",
				dataType:"json",
				url:"conexion.php"
			}).done(function(data,textStatus,jqXHR){

				var lista = data.lista;

				$("#miTabla").html("");

				$.each(lista, function(ind, elem){

					$("<tr>"+
						"<td>"+elem.id+"</td>"+
						"<td>"+elem.nombre+"</td>"+
						"<td>"+elem.apellidopaterno+"</td>"+
						"<td>"+elem.apellidomaterno+"</td>"+
						"</tr>").appendTo($("#miTabla"));


				});			


			}).fail(function(jqXHR,textStatus,textError){
				alert("Error al realizar la peticion dame".textError);

			});

			if(pagina >= 1)
			{
				paginador.find(".prev_link").show();

			}
			else
			{
				paginador.find(".prev_link").hide();
			}


			if(pagina <(totalPaginas- numerosPorPagina))
			{
				paginador.find(".next_link").show();
			}else
			{
				paginador.find(".next_link").hide();
			}

			paginador.data("pag",pagina);

			if(numerosPorPagina>1)
			{
				$(".page_link").hide();
				if(pagina < (totalPaginas- numerosPorPagina))
				{
					$(".page_link").slice(pagina,numerosPorPagina + pagina).show();
				}
				else{
					if(totalPaginas > numerosPorPagina)
						$(".page_link").slice(totalPaginas- numerosPorPagina).show();
					else
						$(".page_link").slice(0).show();

				}
			}

			paginador.children().removeClass("active");
			paginador.children().eq(pagina+2).addClass("active");


		}


		$(function()
		{

			$.ajax({

				data:{"param1":"cuantos"},
				type:"GET",
				dataType:"json",
				url:"conexion.php"
			}).done(function(data,textStatus,jqXHR){
				var total = data.total;

				creaPaginador(total);


			}).fail(function(jqXHR,textStatus,textError){
				alert("Error al realizar la peticion cuantos".textError);

			});



		});



		</script>
	</head>
	<body>
		<div class="panel panel-primary"> 
			<div class="panel-heading">este es el encabezado del panel</div>
			<div class="panel-body">
				<table class="table table-striped table-hover">
					<thead>
					  <tr>
						<th>elemento</th>
						<th>Nombre</th>
						<th>Apellido Paterno</th>
						<th>Apellido Materno</th>
					  </tr>
					</thead>
					<tbody id="miTabla">

					</tbody>
				</table>

				<div class="col-md-12 text-center">
					<ul class="pagination" id="paginador"></ul>
				</div>

			</div>
			<div class="panel-footer">pie del panel</div>
		</div>
	</body>
</html>

 

Código en PHP

<?php
$mysqli= new mysqli("localhost","root","","ejemplotablas");

if($mysqli ->connect_errno)
{
	echo "Fallo al conectar".$mysqli->connect_errno;
}
else
{

	$mysqli->set_charset("utf8"); // Juego de caracteres castellano

	$jsondata = array(); 
	$jsondataList = array();

	if($_GET['param1']=="cuantos")   // Obtener el numero de registros
	{

		$myquery = "SELECT COUNT(*) total FROM tabla1";

		$resultado = $mysqli->query($myquery);

		$fila = $resultado ->fetch_assoc();

		$jsondata['total'] = $fila['total']; // Guardamos el resultado para despues condificarlo en JSON
	}
	elseif($_GET["param1"]=="dame")
	{
		$myquery = "SELECT * FROM tabla1 LIMIT ".$mysqli->real_escape_string($_GET['limit'])." OFFSET ".$mysqli->real_escape_string($_GET["offset"]);

		$resultado = $mysqli->query($myquery);
		while($fila = $resultado ->fetch_assoc())
		{
			$jsondataperson = array();
			$jsondataperson["id"] = $fila["id"];
			$jsondataperson["nombre"] = $fila["nombre"];
			$jsondataperson["apellidopaterno"] = $fila["apellidopaterno"];
			$jsondataperson["apellidomaterno"] = $fila["apellidomaterno"];

			$jsondataList[]=$jsondataperson;

		}

		$jsondata["lista"] = array_values($jsondataList);
	}

header("Content-type:application/json; charset = utf-8"); // Decimos que la informacion de retorno es json en utf
echo json_encode($jsondata); // Codificamos la informacion del array en JSON
exit();
}

?>

Código ejemplo.sql

-- phpMyAdmin SQL Dump
-- version 4.1.14
-- http://www.phpmyadmin.net
--
-- Servidor: 127.0.0.1
-- Versión del servidor: 5.6.17
-- Versión de PHP: 5.5.12

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Base de datos: `ejemplotablas`
--
CREATE DATABASE IF NOT EXISTS `ejemplotablas` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `ejemplotablas`;

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `tabla1`
--

CREATE TABLE IF NOT EXISTS `tabla1` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(50) NOT NULL,
  `apellidopaterno` varchar(50) NOT NULL,
  `apellidomaterno` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=21 ;

--
-- Volcado de datos para la tabla `tabla1`
--

INSERT INTO `tabla1` (`id`, `nombre`, `apellidopaterno`, `apellidomaterno`) VALUES
(1, 'pedro', 'anero', 'lopez'),
(2, 'juan', 'carlos', 'salu'),
(3, 'oscar', 'de la cuesta', 'campillo'),
(4, 'julio', 'rodriguez', 'martinez'),
(5, 'marta', 'sanchez', 'mendoza'),
(6, 'joaquin', 'diaz', 'alvarado'),
(7, 'guillermo', 'montez', 'roma'),
(8, 'arturo', 'santos', 'cruz'),
(9, 'fernando', 'radilla', 'cortes'),
(10, 'tomas', 'flores', 'mendez'),
(11, 'lucas', 'trujillo', 'Aurea'),
(12, 'Daniel', 'Rivas', 'Alevra'),
(13, 'Luis', 'Torres', 'Mendoza'),
(14, 'Daniel', 'Romay', 'Huerta'),
(15, 'pedro', 'Nieto', 'Garcia'),
(16, 'Jaime', 'Rojas', 'Cepeda'),
(17, 'veronica', 'Toledo', 'Carrillo'),
(18, 'Bea', 'Andrada', 'Martinez'),
(19, 'Raul', 'Rios', 'Muñoz'),
(20, 'Marcos', 'Gamboa', 'Peralta');

Enlace de descarga del proyecto EJEMPLO:

http://www.palentino.es/rars/Paginador PHP-AJAX.rar

 

LinkedInPinPrint
« »

Usted debe ser Registrado para publicar un cometario

Home PHP Paginador en PHP y AJAX usando como base Bootstrap e intercambio en JSON
© www.palentino.es, desde el 2012 - Un Blog para compartir conocimientos ...

Uso de cookies en mi sitio palentino.es

Este sitio web utiliza cookies para que tengamos la mejor experiencia de usuario. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de la política de cookies

ACEPTAR
Aviso de cookies