Asi como hace un tiempo atras, hemos puesto una forma de hacer paginación sin usar base de datos, en esta oportunidad y gracias a que un usuario en nuestra fanpage de facebook nos pregunto como poder paginar un array (vector), me he puesto manos a la obra. Al menos sin importar que si no es lo que busca el usuario, igual a mas de uno seguro le servirá
Como en el tutorial anterior, tambien en esta ocasion estaremos usando jquery, por lo tanto el codigo completo del tutorial lo tienen a disposición.
[highlight]<?php
$vector = array(
1 => array(
'contenido' => 'Este es el contenido del div 1',
),
2 => array(
'contenido' => 'Este es el contenido del div 2',
),
3 => array(
'contenido' => 'Este es el contenido del div 3',
),
4 => array(
'contenido' => 'Este es el contenido del div 4',
),
);
//ordenamos el vector
ksort($vector);
echo '
<html>
<head>
<title>Paginacion de un Vector</title>
</head>
<body>';
$i = 1;
foreach($vector as $idx => $valor)
{
echo '
<div id="page_', $idx ,'"', ($i > 1) ? ' style="display:none;"' : '' ,'>
', $valor['contenido'] ,'
</div>';
//aumentamos nuestra bandera
$i ;
}
$cantidadVector = count($vector);
//paginacion
echo '
<p>';
for($ii = 1; $ii <= $cantidadVector; $ii )
{
echo '
<a href="javascript:void(0);" class=".paginacion" paginacion="', $ii ,'">', $ii ,'</a>', ($ii > 1 ? ' ' : '') ,'';
}
echo '
</p>';
echo '
<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").on("click",function(){
var paginacion = $(this).attr("paginacion");
var div = "#page_" paginacion;
$("div[id!=" div "]").hide();
$(div).fadeIn("slow");
});
});
</script>
</body>
</html>';
?>
[/highlight]
Haciendo un repaso de cada parte, vemos que despues del tag body se encuentra la asignacion y creacion de variable “$i = 1;” este nos servirá simplemente como bandera para decirle al codigo que solo el primer registro quede visible y el resto oculte de forma automática.
Antes de continuar vamos a presentar el ejemplo de array (vector)
[highlight]$vector = array(
1 => array(
'contenido' => 'Este es el contenido del div 1',
),
2 => array(
'contenido' => 'Este es el contenido del div 2',
),
3 => array(
'contenido' => 'Este es el contenido del div 3',
),
4 => array(
'contenido' => 'Este es el contenido del div 4',
),
);
[/highlight]
Luego nos aseguramos que dicho vector quede ordenado de acuerdo a su indice, para eso hacemos “ksort($vector);“.
Luego de ordenar nos encargamos de hacer visible el vector con su respectivo codigo html asi como nuestro tutorial de “paginacion sin base de datos” que enlazamos al comienzo, haciendo de la siguiente manera
[highlight]foreach($vector as $idx => $valor)
{
echo '
<div id="page_', $idx ,'"', ($i > 1) ? ' style="display:none;"' : '' ,'>
', $valor['contenido'] ,'
</div>';
//aumentamos nuestra bandera
$i ;
}
[/highlight]
Justamente en esta parte es donde vemos como hacemos uso de nuestra bandera para saber si en que momento imprimimos el primer registro del vector sin importar o tener en cuenta su nro de indice.
Una ves que tenemos todo impreso el vector, nos preocupamos por saber la cantidad de registros que tiene nuestro vector, para eso hacemos esto “$cantidadVector = count($vector);“, cabe aclarar que si hay otra mejor manera de hacerlo, será bienvenido la ayuda, asi aprendemos todos
Cuando ya por fin tenemos la cantidad de registros dentro de nuestro vector, nos preocupamos en armar la paginacion para eso usaremos este simple codigo php
[highlight]//paginacion
echo '
<p>';
for($ii = 1; $ii <= $cantidadVector; $ii )
{
echo '
<a href="javascript:void(0);" class=".paginacion" paginacion="', $ii ,'">', $ii ,'</a>', ($ii > 1 ? ' ' : '') ,'';
}
echo '
</p>';
[/highlight]
Haciendo todo esto nos queda justamente como queremos, un “vector paginado“.
Esperamos que les sea de provecho, cualquier consulta, a las ordenes