Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más » paginacion http://www.masquewordpress.com Tutoriales y recursos web sobre JQuery , PHP, Wordpress , twitter. Aprende diseño web y programación Fri, 03 Feb 2012 19:33:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Paginación PHP con clase http://www.masquewordpress.com/paginacion-php-con-clase/ http://www.masquewordpress.com/paginacion-php-con-clase/#comments Tue, 31 Jan 2012 18:48:23 +0000 Damian http://www.masquewordpress.com/?p=1177 Últimamente ando revisando mis posts antiguos y en esta ocasión quería mostrarles una clase de paginación echa en PHP que es más fácil y prolija de usar que el código de Paginación PHP que publique hace tiempo. Creo que esta forma es la adecuada y aunque no entiendan o manejen clases de PHP , es un buen momento para salpicarse un poco en este mundillo.

Para empezar les quiero mostrar 2 ejemplos de esta clase:

  1. Ejemplo básico
  2. Ejemplo donde se arrastran variables en cada página

Métodos de la clase

  • Paginator. Constructor. Como usar: 
    $pages = new Paginator;
  • paginate. Calcula las páginas a mostrar. Como usar: 
    $pages->paginate();
  • display_items_per_page. Devuelve una cadena HTML para mostrar items por página. Como usar: 
    echo  $pages->display_items_per_page();
  • display_jump_menu. Devuelve una cadena HTML para mostrar el salto de página. Como usar: 
    echo $pages->display_jump_menu();
  • display_pages. Devuelve la cadena HTML que muestra lás paginas. Como usar: 
    echo $pages->display_pages();

Ahora veamos como usar realmente la clase

  1. Incluimos la clase: 
    require_once('paginator.class.php');
  2. Creamos el objeto paginator: 
    $pages= new Paginator;
  3. Configuramos el total de resultados de nuestra query. Para ello podemos usar una COUNT(*) que devuelva la cantidad total de resutados: 
    $pages->items_total = X; // cambiamos X por el total
  4. Configuramos el total de links a mostrar. Por ejemplo el valor por defecto es 7 . Si estamos en la pág 50 mostraria : 47 47 49 50 51 52 53 
    $pages->mid_range = X;
  5. Llamamos al método paginate para que cree la paginación (este método no devuelve nada) 
    $pages->paginate();
  6. Imprimimos las páginas que hemos páginado en el paso anterior: 
    echo $pages->display_pages();
  7. Opcionalmente se pueden usar los métodos de display_jump_menu o display_items_per_page
  8. Como ya tenemos la paginación generada ya podemos usar $pages->limit en nuestra query para limitar los resultados. Por ej: 
    SELECT id, name, address FROM table ORDER BY id ASC $pages->limit

Con estos pasos ya tendremos funcionando la clase PHP para paginar resultados.

Para darle estilo pueden aplicar el que el desarrollador usa por defecto o pueden probar a adaptar algún otro estilo como los descriptos en este otro post.

<style type="text/css">
.paginate {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
}
a.paginate {
border: 1px solid #000080;
padding: 2px 6px 2px 6px;
text-decoration: none;
color: #000080;
}
a.paginate:hover {
background-color: #000080;
color: #FFF;
text-decoration: underline;
}
a.current {
border: 1px solid #000080;
font: bold .7em Arial,Helvetica,sans-serif;
padding: 2px 6px 2px 6px;
cursor: default;
background:#000080;
color: #FFF;
text-decoration: none;
}
span.inactive {
border: 1px solid #999;
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
padding: 2px 6px 2px 6px;
color: #999;
cursor: default;
}
</style>

Y por último aquí tienen la clase PHP encargada de todo:

<?php
/*
 * PHP Pagination Class
 * @author admin@catchmyfame.com - http://www.catchmyfame.com
 * @version 2.0.0
 * @date October 18, 2011
 * @copyright (c) admin@catchmyfame.com (www.catchmyfame.com)
 * @license CC Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) - http://creativecommons.org/licenses/by-sa/3.0/
 */
class Paginator{
	var $items_per_page;
	var $items_total;
	var $current_page;
	var $num_pages;
	var $mid_range;
	var $low;
	var $limit;
	var $return;
	var $default_ipp;
	var $querystring;
	var $ipp_array;
 
	function Paginator()
	{
		$this->current_page = 1;
		$this->mid_range = 7;
		$this->ipp_array = array(10,25,50,100,'All');
		$this->items_per_page = (!empty($_GET['ipp'])) ? $_GET['ipp']:$this->default_ipp;
	}
 
	function paginate()
	{
		if(!isset($this->default_ipp)) $this->default_ipp=25;
		if($_GET['ipp'] == 'All')
		{
			$this->num_pages = 1;
//			$this->items_per_page = $this->default_ipp;
		}
		else
		{
			if(!is_numeric($this->items_per_page) OR $this->items_per_page <= 0) $this->items_per_page = $this->default_ipp;
			$this->num_pages = ceil($this->items_total/$this->items_per_page);
		}
		$this->current_page = (isset($_GET['page'])) ? (int) $_GET['page'] : 1 ; // must be numeric > 0
		$prev_page = $this->current_page-1;
		$next_page = $this->current_page+1;
		if($_GET)
		{
			$args = explode("&",$_SERVER['QUERY_STRING']);
			foreach($args as $arg)
			{
				$keyval = explode("=",$arg);
				if($keyval[0] != "page" And $keyval[0] != "ipp") $this->querystring .= "&" . $arg;
			}
		}
 
		if($_POST)
		{
			foreach($_POST as $key=>$val)
			{
				if($key != "page" And $key != "ipp") $this->querystring .= "&$key=$val";
			}
		}
		if($this->num_pages > 10)
		{
			$this->return = ($this->current_page > 1 And $this->items_total >= 10) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$prev_page&ipp=$this->items_per_page$this->querystring\">&laquo; Previous</a> ":"<span class=\"inactive\" href=\"#\">&laquo; Previous</span> ";
 
			$this->start_range = $this->current_page - floor($this->mid_range/2);
			$this->end_range = $this->current_page + floor($this->mid_range/2);
 
			if($this->start_range <= 0)
			{
				$this->end_range += abs($this->start_range)+1;
				$this->start_range = 1;
			}
			if($this->end_range > $this->num_pages)
			{
				$this->start_range -= $this->end_range-$this->num_pages;
				$this->end_range = $this->num_pages;
			}
			$this->range = range($this->start_range,$this->end_range);
 
			for($i=1;$i<=$this->num_pages;$i++)
			{
				if($this->range[0] > 2 And $i == $this->range[0]) $this->return .= " ... ";
				// loop through all pages. if first, last, or in range, display
				if($i==1 Or $i==$this->num_pages Or in_array($i,$this->range))
				{
					$this->return .= ($i == $this->current_page And $_GET['page'] != 'All') ? "<a title=\"Go to page $i of $this->num_pages\" class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" title=\"Go to page $i of $this->num_pages\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page$this->querystring\">$i</a> ";
				}
				if($this->range[$this->mid_range-1] < $this->num_pages-1 And $i == $this->range[$this->mid_range-1]) $this->return .= " ... ";
			}
			$this->return .= (($this->current_page < $this->num_pages And $this->items_total >= 10) And ($_GET['page'] != 'All') And $this->current_page > 0) ? "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$next_page&ipp=$this->items_per_page$this->querystring\">Next &raquo;</a>\n":"<span class=\"inactive\" href=\"#\">&raquo; Next</span>\n";
			$this->return .= ($_GET['page'] == 'All') ? "<a class=\"current\" style=\"margin-left:10px\" href=\"#\">All</a> \n":"<a class=\"paginate\" style=\"margin-left:10px\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All$this->querystring\">All</a> \n";
		}
		else
		{
			for($i=1;$i<=$this->num_pages;$i++)
			{
				$this->return .= ($i == $this->current_page) ? "<a class=\"current\" href=\"#\">$i</a> ":"<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=$i&ipp=$this->items_per_page$this->querystring\">$i</a> ";
			}
			$this->return .= "<a class=\"paginate\" href=\"$_SERVER[PHP_SELF]?page=1&ipp=All$this->querystring\">All</a> \n";
		}
		$this->low = ($this->current_page <= 0) ? 0:($this->current_page-1) * $this->items_per_page;
		if($this->current_page <= 0) $this->items_per_page = 0;
		$this->limit = ($_GET['ipp'] == 'All') ? "":" LIMIT $this->low,$this->items_per_page";
	}
	function display_items_per_page()
	{
		$items = '';
		if(!isset($_GET[ipp])) $this->items_per_page = $this->default_ipp;
		foreach($this->ipp_array as $ipp_opt) $items .= ($ipp_opt == $this->items_per_page) ? "<option selected value=\"$ipp_opt\">$ipp_opt</option>\n":"<option value=\"$ipp_opt\">$ipp_opt</option>\n";
		return "<span class=\"paginate\">Items per page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page=1&ipp='+this[this.selectedIndex].value+'$this->querystring';return false\">$items</select>\n";
	}
	function display_jump_menu()
	{
		for($i=1;$i<=$this->num_pages;$i++)
		{
			$option .= ($i==$this->current_page) ? "<option value=\"$i\" selected>$i</option>\n":"<option value=\"$i\">$i</option>\n";
		}
		return "<span class=\"paginate\">Page:</span><select class=\"paginate\" onchange=\"window.location='$_SERVER[PHP_SELF]?page='+this[this.selectedIndex].value+'&ipp=$this->items_per_page$this->querystring';return false\">$option</select>\n";
	}
	function display_pages()
	{
		return $this->return;
	}
}

Pueden ver más información en el post del autor: http://www.catchmyfame.com/2007/07/28/finally-the-simple-pagination-class/

Saludos!!!

]]> http://www.masquewordpress.com/paginacion-php-con-clase/feed/ 1 Paginación con PHP y MySQL + 3 estilos http://www.masquewordpress.com/paginacion-con-php-y-mysql-3-estilos/ http://www.masquewordpress.com/paginacion-con-php-y-mysql-3-estilos/#comments Mon, 25 May 2009 18:08:23 +0000 Damian http://masquewordpress.com/?p=23 En este tutorial les voy a enseñar el método que utilizo para hacer paginación en mis diseños.Pero para empezar ¿A que se le llama paginación? Esto es simplemente el índice que aparece abajo del todo que algunas veces contiene números y otras no, y nos sirve para cambiar de página. Es muy útil cuando tenemos muchos datos para mostrar y ya resulta feo que aparezca todo en la misma página.

Típica estructura:

estructura paginación

La estructura más comun suele contar con 2 botones (Previous y next) más otros tantos con los números de las páginas que tengamos(variable segun la cantidad de datos). El número resaltado indica en que página nos encontramos actualmente , y si no hay más páginas hacia abajo o hacia arriba se deshabilitaran los botones de Previous y Next respectivamente. Por último tenemos el selector de números que nos permitira saltar directamente a cualquier página sin necesidad de pasar una a una.

Para diseñar esta estructura usaremos una lista HTML (<ul>) que a su vez contendra tantos elementos de lista (<li>) como sea necesario. A cada lista le vamos a asignar un ID que definirá su estilo. A continuación paso a explicar más detalladamente.

Paginación al estilo de Flickr:

En este caso vamos a diseñar la paginación al estilo de Flickr y se verá del siguiente modo:

flicrk

El código HTML que vamos a usar es muy simple y nos servira como esqueleto para cualquier estilo , ya que solo necesitaremos cambiar el ID de la lista que en el siguiente caso será “pagination-flickr”.

1
2
3
4
5
6
7
8
9
10
11

<ul id="pagination-flickr">
	<li class="previous-off">«Previous</li>
	<li class="active">1</li>
	<li><a href="?page=2">2</a></li>
	<li><a href="?page=3">3</a></li>
	<li><a href="?page=4">4</a></li>
	<li><a href="?page=5">5</a></li>
	<li><a href="?page=6">6</a></li>
	<li><a href="?page=7">7</a></li>
	<li class="next"><a href="?page=8">Next »</a></li>
</ul>

Ahora solo nos queda agregar el código CSS para darle estilo a nuestra lista:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* -------------------------------------------- */
/* ------------- Pagination: Flickr -----------	*/
/* -------------------------------------------- */
ul    { border:0; margin:0; padding:0; }
#pagination-flickr li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-flickr a           { border:solid 1px #DDDDDD; margin-right:2px; }
#pagination-flickr .previous-off,
#pagination-flickr .next-off   { color:#666666; display:block; float:left; font-weight:bold; padding:3px 4px; }
#pagination-flickr .next a,
#pagination-flickr .previous a { font-weight:bold; border:solid 1px #FFFFFF; }
#pagination-flickr .active     { color:#ff0084; font-weight:bold; display:block; float:left; padding:4px 6px; }
#pagination-flickr a:link,
#pagination-flickr a:visited   { color:#0063e3; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-flickr a:hover     { border:solid 1px #666666; }

Paginación al estilo de DIGG:

digg

La estructura como pueden ver es la misma. Solo cambiamos el atributo ID de la lista.

1
2
3
4
5
6
7
8
9
10
11

<ul id="pagination-digg">
	<li class="previous-off">«Previous</li>
	<li class="active">1</li>
	<li><a href="?page=2">2</a></li>
	<li><a href="?page=3">3</a></li>
	<li><a href="?page=4">4</a></li>
	<li><a href="?page=5">5</a></li>
	<li><a href="?page=6">6</a></li>
	<li><a href="?page=7">7</a></li>
	<li class="next"><a href="?page=8">Next »</a></li>
</ul>

Y nuevamente añadiremos el estilo correspondiente. Como vereis los elementos son los mismos, solo cambiamos algunos atributos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* -------------------------------------------- */
/* ----------- Pagination: Digg Style --------- */
/* -------------------------------------------- */
ul    { border:0; margin:0; padding:0; }
#pagination-digg li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-digg a           { border:solid 1px #9aafe5; margin-right:2px; }
#pagination-digg .previous-off,
#pagination-digg .next-off   { border:solid 1px #DEDEDE; color:#888888; display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; }
#pagination-digg .next a,
#pagination-digg .previous a { font-weight:bold; }
#pagination-digg .active     { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ margin-right:2px; }
#pagination-digg a:link,
#pagination-digg a:visited   { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-digg a:hover     { border:solid 1px #0e509e; }

Estilo de paginación limpio:

clean

Para crear un estilo un poco más limpio y menos cargado podemos usar el siguiente codigo CSS. Recordar que tienen que cambiar el ID del elemento <ul> por “pagination-clean” :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

/* -------------------------------------------- */
/* ------------- Pagination: Clean ------------ */
/* -------------------------------------------- */
#pagination-clean li          { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
/* savers #pagination-clean li,*/
#pagination-clean a           { border-right:solid 1px #DEDEDE; margin-right:2px; }
#pagination-clean .previous-off,
#pagination-clean .next-off   { color:#888888; display:block; float:left; font-weight:bold; padding:3px 4px; }
#pagination-clean .next a,
#pagination-clean previous a  { border:none; font-weight:bold; }
#pagination-clean .active     { color:#000000; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ border-right:solid 1px #DEDEDE; }
#pagination-clean a:link,
#pagination-clean a:visited   { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:underline; }
#pagination-clean a:hover     { text-decoration:none; }

Con esto ya tenemos unas listas y su correspondientes estilos para que nuestra paginación quede de una forma profesional. El siguiente paso es añadir el codigo PHP necesario para crear el índice de acuerdo a la cantidad de datos que tengamos y poder así modificar la consulta SQL para que nos muestre ciertos resultados. Para las conexiones a la base de datos voy a seguir los pasos descritos en este artículo.

Para empezar necesitamos hacer 2 consultas SQL en lugar de 1. La primera va a ser para recuperar TODOS los datos y asi poder calcular cuantas páginas vamos a necesitar. La segunda consulta va a mostrar un rango de resultados según en que página estemos.

Por ejemplo digamos que queremos mostrar una tabla con datos de películas donde nos muestre el nombre de la película, el año de creación , etc. La tabla SQL esta compuesto por los siguientes campos: idPelicula(int(5)), nombre(VARCHAR(150)), director(VARCHAR(100)), anio(DATE).

A continuación como seria el código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

<?php
//INCLUYO LA HOJA DE ESTILOS
?>
<link href="css/paginacion.css" type="text/css" rel="stylesheet">
<?
include('config/db.php');
$conn=get_db_conn();
 
//AL PRINCIPIO COMPRUEBO SI HICIERON CLICK EN ALGUNA PÁGINA 
if(isset($_GET['page'])){
    $page= $_GET['page'];
}else{
//SI NO DIGO Q ES LA PRIMERA PÁGINA
    $page=1;
}
 
//ACA SE SELECCIONAN TODOS LOS DATOS DE LA TABLA
$consulta="SELECT * FROM peliculas";
$datos=mysql_query($consulta,$conn);
 
//MIRO CUANTOS DATOS FUERON DEVUELTOS
$num_rows=mysql_num_rows($datos);
 
//ACA SE DECIDE CUANTOS RESULTADOS MOSTRAR POR PÁGINA , EN EL EJEMPLO PONGO 15
$rows_per_page= 15;
 
//CALCULO LA ULTIMA PÁGINA
$lastpage= ceil($num_rows / $rows_per_page);
 
//COMPRUEBO QUE EL VALOR DE LA PÁGINA SEA CORRECTO Y SI ES LA ULTIMA PÁGINA
$page=(int)$page;
if($page > $lastpage){
    $page= $lastpage;
}
if($page < 1){
    $page=1;
}
 
//CREO LA SENTENCIA LIMIT PARA AÑADIR A LA CONSULTA QUE DEFINITIVA
$limit= 'LIMIT '. ($page -1) * $rows_per_page . ',' .$rows_per_page;
 
//REALIZO LA CONSULTA QUE VA A MOSTRAR LOS DATOS (ES LA ANTERIO + EL $limit)
$consulta .=" $limit";
$peliculas=mysql_query($consulta,$conn);
 
if(!$peliculas){
        //SI FALLA LA CONSULTA MUESTRO ERROR
 die('Invalid query: ' . mysql_error());
}else{
      //SI ES CORRECTA MUESTRO LOS DATOS 
      ?> <table><thead>
        <tr><th>Título</th><th>Director</th><th> Año de producción</th></tr>
        </thead>
        <tbody>
    <? while($row = mysql_fetch_assoc($peliculas)){  ?>
        <tr><td><? echo $row['nombre']; ?> </td><td> <? echo $row['director']; ?> </td><td> <?echo $row['anio']; ?> </td></tr>
       <?  } ?>
      </tbody>
      </table>
<?
//UNA VEZ Q MUESTRO LOS DATOS TENGO Q MOSTRAR EL BLOQUE DE PAGINACIÓN SIEMPRE Y CUANDO HAYA MÁS DE UNA PÁGINA
 
if($numrows != 0){
   $nextpage= $page +1;
   $prevpage= $page -1;
?><ul id="pagination-digg"><?
//SI ES LA PRIMERA PÁGINA DESHABILITO EL BOTON DE PREVIOUS, MUESTRO EL 1 COMO ACTIVO Y MUESTRO EL RESTO DE PÁGINAS
 if ($page == 1) {
 	?>
      <li class="previous-off">&laquo; Previous</li>
      <li class="active">1</li> <?
	for($i= $page+1; $i<= $lastpage ; $i++){?>
			<li><a href="busquedas.php?page=<? echo $i;?>"><? echo $i;?></a></li>
 <? }
       //Y SI LA ULTIMA PÁGINA ES MAYOR QUE LA ACTUAL MUESTRO EL BOTON NEXT O LO DESHABILITO
	if($lastpage >$page ){?>		
      <li class="next"><a href="busquedas.php?page=<? echo $nextpage;?>" >Next &raquo;</a></li><?
	}else{?>
	  <li class="next-off">Next &raquo;</li>
<?	}
 } else {
//EN CAMBIO SI NO ESTAMOS EN LA PÁGINA UNO HABILITO EL BOTON DE PREVIUS Y MUESTRO LAS DEMÁS
	?>
	 <li class="previous"><a href="busquedas.php?page=<? echo $prevpage;?>"  >&laquo; Previous</a></li><?
      for($i= 1; $i<= $lastpage ; $i++){
                       //COMPRUEBO SI ES LA PÁGINA ACTIVA O NO
	  		if($page == $i){
		?>	<li class="active"><? echo $i;?></li><?
			}else{
		?>	<li><a href="busquedas.php?page=<? echo $i;?>" ><? echo $i;?></a></li><?
			}
	  }
         //Y SI NO ES LA ÚLTIMA PÁGINA ACTIVO EL BOTON NEXT		
	  if($lastpage >$page ){	?>	
      <li class="next"><a href="busquedas.php?page=<? echo $nextpage;?>">Next &raquo;</a></li><?
	  }else{
	?> <li class="next-off">Next &raquo;</li><?
	  }
 }	  
?></ul></div><?
} 
}

Seguramente esta última parte del codigo se pueda mejorar ya que la escribí un poco “rapido”, así que estoy abierto a sugerencias. De todas formas a mi me funciona todo correctamente. Espero que les haya servido de ayuda, ya que en su día me costo mucho encontrar un buen tutorial sobre la paginación y ninguno de los que encontre venia completo. Un saludo!!!

Descargar ejemplo

Nueva version usando una clase PHP
]]> http://www.masquewordpress.com/paginacion-con-php-y-mysql-3-estilos/feed/ 33