Co trzy - wyświetlanie danych

Dzisiaj omówię wyświetlanie rekordów "co trzy". Piszę co trzy, gdyż zazwyczaj na forum pytają o trzy. Oczywiście podane przeze mnie metody można zastosować do wyświetlania co pięć, dziesięć i ile Wam się będzie chciało. Wyświetlanie w standardowy sposób, czyli od lewej do prawej, jest banalnie proste. Piszę jednak ten artykuł, gdyż przedstawię również metodę z góry do dołu - co jest już ciutkę trudniejsze. Tak czy siak na pewno komuś się przyda.

Od lewej do prawej

1 2 3
4 5 6
7 8 9

Jak już wspomniałem metoda ta jest stosunkowo prosta. Załóżmy, że chcemy wyświetlać rekordy co trzy. W tym celu wystarczy w pętli wyświetlać dane, a gdy wyświetlimy trzeci rekord, należy przejść do nowej linii. Sprawdzanie, czy osiągneliśmy trzeci kolejny rekord można zrelizować stosując dzielenie modulo.

<?php
while (....){
  if ($i % 3 == 2){
  //jestesmy w trzecim kolejnym rekordzie i coś robimy w związku z tym
  }
}
?>

Przy wyświetlaniu danych o lewej do prawej możemy robić to na bieżąco podczas pobierania danych z tabeli czy innego źródła danych.

Z góry do dołu

1 4 7
2 5 8
3 6 9

Metoda ta jest trudniejsza. Nie możemy jej stosować bezpośrednio przy pobieraniu danych. Najpierw dane musimy pobrać, następnie je odpowiednio przetworzyć a dopiero potem w odpowiedni sposób wyświetlić.

Podsumowanie

Zaskoczeni, że nie podałem tu żadnych kodów? Przygotowałem paczkę z przykładowymi kodami do wyświetlania danych w obu metodach. Każdy kod posiada komentarz, który mam nadzieję wyjaśni Wam o co w tym wszystkim biega. Za bardzo nie wiedziałem jak mam to opisać w arcie, więc posłużyłem się kodem. Całość jak zwykle do ściągniecia w dziale download. Paczka leży w katalagu Kody do artykułów i nazywa się cotrzy.zip

Komentarze

 

2010-10-23 00:00 gość_Fifi209

Wydaje mi się, że w pionie można zrealizować w troszkę inny sposób. (prostszy)
Ogólnie też dzielenie modulo, lecz odpowiedni css załatwi sprawę.

<html>
	<head>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	<body>
		<div id="bin">
			<div class="test">
			<?php
				$max = 9;
				for ($i=1; $i <= $max; $i++) {
					echo $i.'<br/>';
					if ($i % 3 == 0 && $i < $max) {
						echo '</div><div class="test">';
					}elseif ($i == $max) {
						echo '</div>';
					}
				}
			?>
		</div>
	</body>
</html>


#bin div {
	float: left;
}

.test {
	display: block;
	border: 1px solid black;
	width: auto;
	height: auto;
	
}

2010-10-23 02:06 gość_Wiceps

<?php 
$arr = array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24);

$ile = 5;

$count = count($arr);
for($i=0; $i<$ile; $i++){
	for($j=$i;$j<$count;$j+=$ile){
		echo $arr[$j].',';
	}
	echo '<br/>';
}

?>

2010-10-25 07:48 nospor

@Fifi209, @Wiceps
Co trzy głowy to nie jedna. Fajne kody

2010-10-25 15:36 gość_Fifi209

Mój możesz spokojnie zabrać jako przykład. ;p Im mniej pętli tym lepiej ;_)

2010-10-25 20:05 nospor

@Fifi209 kod jest w komentarzu - nie zginie
Zastanawiam się jednak nad jedną rzeczą: w Twoim kodzie nie będę mógł podzielić ładnie na komórki, każdą wartość, tak jak to podałem w przykładzie?

2010-10-25 21:07 gość_Fifi209

Oj szczegóły, wystarczy zamienić:
echo $i.'<br/>';

na:
echo '<div class="x">'.$i.'</div>';


W css zamienić na:
#bin div {
    float: left;
}

.test {
    display: block;
    border: 1px solid black;
	border-bottom: 0.5px solid black;
    width: auto;
    height: auto;
    
}
.x {
	clear: both;
	border-bottom: 1px solid black;
}


Ot, cała filozofia.

Wynik?
http://i52.tinypic.com/wits1u.jpg

(offtopic: problem z tagiem: img)

2010-10-25 21:11 nospor

Oj szczegóły, wystarczy zamienić:
No nie taki szczegół. Bo wystarczy, że jedna z wartości będzie miała tekst kilkulinijkowy a pozostałe nie i już "tabelkę" szlag trafił. Wiem, czepiam się

(offtopic: problem z tagiem: img)
Tak, wiem. Narazie mam go wyłączony.

2010-10-25 21:36 gość_Fifi209

Ja podałem tylko przykład, jak to można zrobić inaczej. W Twoim w ogóle nie było borderów - ja je sobie zrobiłem dla ułatwienia.

Wystarczy dopracować css i śmiga jak trzeba.

2010-10-25 22:33 nospor

Ok, nie będę się kłócił - specem w css nie jestem

2010-11-16 15:54 gość_ja

@gość_Fifi209 jak ustwię max np 10 to już dzieli na 4 kolumny

2010-11-23 20:22 gość_Fifi209

@gość_ja
A co byś chciał? Skoro dzieli co 3 a dasz w max 10 to kolejny zostanie przerzucony, to chyba logiczne jest.

Dodaj komentarz

 

Dostępne bbcode: b, u, i, url, code, php, css, html, sql, js

Ostatnio komentowane

  1. ShoutBox Podświadomość
  2. ShoutBox Trilux
  3. ShoutBox morelowy-dolomit
  4. ShoutBox Lucidoremi
  5. ShoutBox Goran Lezczek
  6. ShoutBox Ktos
  7. Opcje dwuwartościowe... gosc

Ostatnio na forum

  1. alkoholu na prezent alkoholu na prezent
  2. Kod 95 w Polsce Kod 95 w Polsce
  3. Naświetlacz LED 100W Naświetlacz LED 100W
  4. Retainer Retainer
  5. Retainer Retainer
  6. Kule ortopedyczne Kule ortopedyczne
  7. Bydgoszczy aparaty s... Bydgoszczy aparaty słuchowe

Skrypty użytkowników

  1. Klasa obsługi szablo... Lirdoner
  2. Sekcje user76
  3. Klasa walidująca for... user76
  4. Licznik Gości online korey
  5. Form Builder Comandeer
  6. Dynamiczny licznik z... korey
  7. Captcha Comandeer