DokuWiki - Tabellen (geavanceerd)

Maak een nieuwe pagina aan met als titel bijv. Bijnamen en daarbinnen een tabel met de kolommen: Bijnaam, Achternaam, Voornaam, Geboortedatum, Eigenschappen en Foto ¹⁾. Dit kan op verschillende manieren, maar de makkelijkste is wellicht via een eenmalige import van een CSV bestand waarbij naast de kopregels tevens een aantal detailregels reeds zijn gevuld. Zie 400_multifileimport en 405_multifileimport_csv_specifiek.

De tabel ziet er in eerste instantie zo uit:

^ Bijnaam ^ Achternaam ^ Voornaam ^ Geboortedatum ^ Eigenschappen ^ Foto ^
| Snelle Henkie | Jansen | Henk | 01-05-1929 | Henk was een slow starter, maar als hij eenmaal op gang was gekomen, was er geen houden aan.|  |
| Slome Dirkjan | van Vliet | Dirkjan | 21-10-1948 | Dirkjan was niet vooruit te branden ... |  |

De kolom met Geboortedatum wordt weergegeven in het Nederlandse formaat en de kolom Foto is nog leeg.

Via de tabulaire editor wordt de tabel als volgt getoond:

De breedte van de kolommen past zich aan aan de inhoud. Als kolommen niet op beeld passen kan de horizontale schuifbalk worden gebruikt om deze in beeld te brengen.

Om nu makkelijk foto's te kunnen opnemen in de tabel van de pagina getiteld Bijnamen maak nu nog een pagina aan met als titel Bijnamen - schaduw ²⁾.

Creëer vervolgens per bijnaam een aparte sectie waarbinnen je één of meer foto's kunt plakken. Voor de voorbeeldtabel ziet de schaduwpagina er dan als volgt uit.

====== Bijnamen - schaduw ======

===== Snelle Henkie =====

===== Slome Dirkjan =====

Zoek nu de foto's van deze personen en plak deze onder de juiste sectie. Zie hiervoor ook 040_afbeeldingen.

Aangezien de foto's in de tabel op de pagina Bijnamen opgenomen dienen te worden, moeten deze kleiner worden weergegeven en dezelfde dimensies hebben ongeacht de daadwerkelijke grootte van de afbeelding. Tevens willen we de afbeelding in gallery modus tonen.

We wijzigen de bestaande syntax van

{{:tmp:2025071412572347:pasted:20250714-130540.png}}

in

{{gallery> :tmp:2025071412572347:pasted:20250714-130540.png?150x150 }}

Het gevolg is dat de schaduwpagina er nu zo uitziet:

Nu de foto's de gewenste afmetingen hebben, kunnen deze worden gekopieerd van de pagina Bijnamen - schaduw en geplakt in de tabel op de pagina Bijnamen. Bij gebruik van de tabulaire editor kan dit door te dubbelklikken in de juiste cel in de rechterkolom en vervolgens te plakken via bijv. Ctrl-V onder Windows.

En dan ziet het e.e.a. er zo uit:

De tabel op de pagina Bijnamen is inmiddels compleet en bevat 4 regels.

Om van deze tabel een datatabel te maken, plaats de volgende regel net boven de kopregel van de tabel

<datatable responsive="true" buttons='[]' >

en de volgende sluittag net onder de laatste detailregel van de tabel

</datatable>

Na het opslaan van de pagina ziet de tabel er ineens zo uit

Door het gebruik van Javascript is de tabel veranderd in een interactieve tabel waarbij de regels standaard alfabetisch worden gesorteerd op de waarde in de eerste kolom. Door nu op elke andere kolom te klikken, wijzigt de sorteervolgorde van de tabel. Door 2 keer op dezelfde kolom te klikken wijzigt de volgorde van oplopend naar aflopend.

MAAR nu doet zich een probleem voor bij de sortering op de Geboortedatum.

Dit komt natuurlijk, omdat de inhoud van de kolom wordt gezien als gewone tekst en dus ook als zodanig gesorteerd.

Er zijn 2 eenvoudige manieren om dit op te lossen. De eerste is door het gebruik van het Amerikaanse datumformaat JJJJ-MM-DD in plaats van de Nederlandse notering. Maar een elegantere oplossing is de volgende: zet voor de datum in het Nederlandse formaat, de datum in het Amerikaanse formaat en zorg dat die eerste niet zichtbaar is voor de websitebezoeker.

In het bovenstaande voorbeeld ziet dit er in DokuWiki syntax als volgt uit

| <wrap hide>1929-05-01</wrap> 01-05-1929  |
| <wrap hide>1948-10-21</wrap> 21-10-1948  |
| <wrap hide>1930-07-15</wrap> 15-07-1930  |
| <wrap hide>1952-06-18</wrap> 18-06-1952  |

De <wrap hide>...</wrap> met daartussen dezelfde datum in het Amerikaanse formaat staat wel in de brontekst die naar de browser wordt gestuurd, maar is niet zichtbaar voor de gebruiker. De Javascript functie die voor de sortering zorgt, ziet echter wel het Amerikaanse formaat, en sorteert vervolgens de kolom zoals gewenst.

Binnen een webpagina wordt de breedte van een tabel automatisch bepaald op basis van de aanwezige tekst in een cel. Soms kan dit ervoor zorgen dat bepaalde kolommen te smal worden, omdat in één of meer cellen de tekst te lang is.

In het geval van de voorbeeldtabel gaan we deze handmatig aanpassen, zodat de kolom Eigenschappen minder ruimte inneemt en de inhoud daarvan automatisch over meerdere regels wordt verdeeld. Als de plugin Table Width is geïnstalleerd zoals binnen Haima, kan dit als volgt.

De eerste regels van de tabel zien er als volgt uit

<datatable responsive="true" buttons='[]' >
^ Bijnaam ^ Achternaam ^ Voornaam ^ Geboortedatum ^ Eigenschappen ^ Foto ^

door nu tussen deze regels een extra tabelopmaakregel op te nemen

<datatable responsive="true" buttons='[]' >
|<100% 12% 12% 12% 10% 30% ->|
^ Bijnaam ^ Achternaam ^ Voornaam ^ Geboortedatum ^ Eigenschappen ^ Foto ^

wordt bepaald dat de totale tabel 100% van de beschikbare ruimte inneemt, dat de eerste 3 kolommen 12% beslaan, dat Geboortedatum 10% in beslag neemt, dat Eigenschappen 30% wordt toegekend en aan de kolom Foto het percentage dat overblijft.

De opmaak van de tabel ziet er vervolgens zo uit

Met deze laatste stap ziet de tabel er uit zoals de gewenste doeltabel.

Bij deze oefening werd gebruik gemaakt van 2 pagina's, te weten Bijnamen en Bijnamen - schaduw. Als we de pagina Bijnamen beschikbaar willen stellen voor het grote publiek, dienen we aan het begin van deze pagina nog de codering /*live*/ op te nemen. De schaduwpagina is puur bedoeld als werkpagina en is niet bedoeld voor de normale bezoekers van de website. Markeer deze dus niet als live.

Er wordt aangeraden om voor elke pagina met een tabel waarin afbeeldingen worden opgenomen, gebruik te maken van een aparte schaduwpagina. Hierbij is het tevens handig om voor elke regel in de tabel een aparte sectie in de schaduwpagina aan te maken zodat makkelijk naar de juiste gegevens kan worden gesprongen via de Inhoudsopgave.