Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Amigos,
Esse tópico é para compartilhar um script que eu desenvolvi e me ajuda muito. Trata-se de uma listagem em 2 colunas, porém não da forma tradicional.
Faço a listagem usando a TAG de lista (UL e LI) do HTML e CSS para diagramar.
Quando solicito um resultado do MySQL através do PHP por ordem alfabética o mesmo retorna o resultado abaixo:
A
A
B
C
C
C
D
Se eu quero em 2 colunas fica assim:
Col 1 | Col 2
A A
B C
C C
D
O Objetivo é colocar assim:
Col 1 | Col 2
A C
A C
B D
C
Vamos ao PHP
<?php
$conn = mysql_connect("localhost", "mysql_user", "mysql_password");
mysql_select_db("mydbname", $conn);
$sql = "SELECT bairro FROM tb_bairro ORDER BY bairro ASC";
$result = mysql_query($sql, $conn);
$row = mysql_fetch_assoc($result);
// Retorna o total de registros
$total_row = mysql_num_rows($result);
// Salvo o resultados em um array
// Faço isso para os registros ganharem índices de 0 a x.
do{
$bairro[] = $row['bairro'];
}while($row = mysql_fetch_assoc($result));
mysql_free_result($result);
//Aqui eu defino o número de colunas, no caso 2 colunas
$r = $total_row / 2;
// Existe matemática para duas situações
// Se o total for par ou ímpar
// Vamos saber
$status = (1 & $total_row) ? 'impar' : 'par';
if(status == 'impar'){
// Cálculos para situação ímpar
// Quando dividimos um número ímpar por 2 ele fica igal algo,5
// Por isso temos que arredondar e somar mais pois a primeira coluna fica com um registro a mais
$coluna1 = floor($r) + 1;
$coluna2 = ($total_row - $coluna1) + 1;
}else{
// Se for par não existe coluna com sobras então as duas colunas tem o mesmo número de elementos
$coluna1 = $r;
$coluna2 = $r;
}
// Definir alguns parametro para o Loop
// O $i é o início da contagem da primeira coluna
// O $j é o início da segunda coluna
// O $m é o limite do Loop
$i = 0;
$j = $coluna2;
$m = 0;
?>
CSS
<style type="text/css">
*{padding: 0px; margin: 0px; list-style:none;}
div{width: 500px; margin-left: auto; margin-right: auto;}
div ul{width: 500px; display:block;}
div ul li{width: 240px;height: 15px;padding: 5px;float: left;}
</style>
HTML e PHP
<div>
<ul>
<?php // Imprimindo o resultado
do{
// Limite para Coluna 1 - $i
if($i < $coluna1){
echo '<li>'. $bairro[$i] .'</li>';
$i++;
}
// Limite para Coluna 2 - $j
if($j < $total_row){
echo '<li>'. $bairro[$j] .'</li>';
$j++;
}
$m++;
}while($m < $total_row);
?>
</ul>
</div>
Dessa forma eu consegui colocar os resultados em duas colunas e em ordem alfabética.
O SEGREDO é trançar os dados. E pode fazer N colunas desde que altere sempre a matemática acima. Experimente tirar o Float do LI em CSS
Se alguém tiver algo a acrescentar, alguma forma mais simples, que tenha um consumo menor, por favor apresente e acrescente para mim e os companheiros de forum.
Obrigado a todos.
Carregando comentários...