WEB SUPER MASTER

Hoje vamos implementar o nosso post anterior - paginação de resultados - com um css que irá deixá-lo assim:Você pode variar as cores como desejar e é muito fácil, vamos ao código css:

body {
font-size: 100%;
color: #333;
background: #FFF;
font-family: Arial, Helvetica, sans-serif;
}
#pages {
padding: 3px;
}
#pages ul {
list-style-type: none;
}
#pages li {
float: left;
display: inline;
margin: 0 5px 0 0;
display: block;
}
#pages li a {
color: #88af3f;
padding: 4px;
border: 1px solid #ddd;
text-decoration: none;
float: left;
}
#pages li a:hover {
color: #638425;
background: #f1ffd6;
border: 1px solid #85bd1e;
}
#pages li.nolink {
color: #CCC;
border: 1px solid #F3F3F3;
padding: 4px;
}
#pages li.current {
color: #FFF;
border: 1px solid #b2e05d;
padding: 4px;
background: #b2e05d;
}

Salve esta página como paginacao.css

Agora vamos ver como o código é aplicado na paginação:

<div id="pages">
<ul>
<li class="nolink">« Previous Page</li>
<li class="current">1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">Next Page »</a></li>
</ul>
</div>

Salve esta página como teste_paginacao.html e veja o resultado.

APLICANDO ESTE CSS NO POST ANTERIOR
Para ver o post clique aqui!

Este é o código completo com o css.

<link rel="stylesheet" type="text/css" href="paginacao.css">
<?
require("configuracoes/conecta.");

if (!isset($_GET["pagina"])) {
$pagina = 1;
}
else {
$pagina = $_GET["pagina"];

}

//quantidade de resultados por página
$max=50;
//quantidade de links para esquerda e direita
$qtd = 7;

$inicio = $pagina - 1;
$inicio = $max * $inicio;

$sql=("SELECT * FROM pessoa");
$query=mysql_query($sql);
$total=mysql_num_rows($query);

if ($total == 0)
echo "Nenhum registro encontrado!";
else

{
echo"Quantidade de registros encontrados: ".$total.'<br><br>';
$sql2=("SELECT * FROM pessoa LIMIT $inicio,$max");
$query2=mysql_query($sql2);
?>
<table>
<?
while ($mostrar=mysql_fetch_array($query2)){ ?>
<tr>
<td><? echo $mostrar['nome'];?></td>
<td><? echo $mostrar['telefone'];?></td>
</tr>
<? }?>
</table>
<table>
<tr>
<td height="71">
<div id="pages">
<ul>
<?
}
// Calculando pagina anterior
$menos = $pagina - 1;
// Calculando pagina posterior
$mais = $pagina + 1;
$pgs = ceil($total / $max);
if($pgs > 1 )
{
if($menos >0)
{
echo "<li><a href=\"?pagina=$menos\">Anterior</a></li>";
}else{ echo "<li class=\"nolink\">anterior</li>"; }
if (($pagina-$qtd) < 1 )

$anterior = 1;

else
$anterior = $pagina-$qtd;

if (($pagina+$qtd) > $pgs )
$posterior = $pgs;
else

$posterior = $pagina + $qtd;

for($i=$anterior;$i <= $posterior; $i++)
if($i != $pagina)
echo " <li><a href=\"?pagina=".($i)."\">$i</a></li>";

else
echo "<li class=\"current\"> <strong>".$i."</strong></li>";

if($mais <= $pgs)
{
?>
<li><a href="?pagina=<? echo $mais; ?>">Proxima</a></li>
<?
}else{
?>
<li class="nolink">Proxima</li>
<?
}

}

?>
</ul>
</div>
</td>
</tr>
</table>