kolommen met gegevens sorteren op website

[anoniem]

Hallo, Ik ben bezig om op mijn website een soort database van gegevens aan te leggen welke door bezoekers geraadpleegd kunnen worden. Nou zou ik graag dat de bezoekers zelf kunnen kiezen hoe de informatie gesorteerd op het scherm wordt weergegeven. De bezoekers moeten bijvoorbeeld kunnen kiezen tussen een lijst gesorteerd op datum of bijvoorbeeld gesorteerd op onderwerp. Ik heb wel eens gezien op een website dat er boven verschillende kolommen tekst het hoofdonderwerp staat afgebeeld. Door daar op te klikken wordt de tekst in die kolom gesorteerd. Wie weet hoe zoiets mogelijk is? En dan het liefst met css als het mogelijk is. Met vriendelijke groeten, W.Tulp

[anoniem]

Met CSS is dit per definitie niet mogelijk, aangezien dat bedoeld is voor opmaak, niets meer en niets minder. Je zal dus moeten werken met JavaScript of de data reeds laten sorteren in de query. Echt moeilijk kan het iig niet zijn, maar dat hangt met name af waar je de data vandaan haalt en welke taal je gebruikt om te scripten. [b:758eb566ad]Edit:[/b:758eb566ad] Als je het niet in de query doet is [url=http://www.kryogenix.org/code/browser/sorttable/]deze methode[/url] misschien een aardig alternatief... - Bas

[anoniem]

Bas, dat is een hele mooie link. ik heb het even geprobeerd en het werkt uitstekend. Een beetje "Harry Potter"style, of te wel "automagisch" Dit wist ik (nog) niet: One of the neat things about the DOM is that if you insert into the document an element that is already in the document, then it moves it from where it is to where you inserted it thanks wimb

[anoniem]

[quote:1a9bff703e="WimB"]ik heb het even geprobeerd en het werkt uitstekend. Een beetje "Harry Potter"style, of te wel "automagisch"[/quote:1a9bff703e]Ik ben een groot voorstander van "unobtrusive JavaScript". Overigens werkt het scriptje niet zo goed als je gebruik maakt van colspan, dan snapt'ie het niet meer. Maar verder is het idd een ideale oplossing.[quote:1a9bff703e="WimB"]Dit wist ik (nog) niet: [...][/quote:1a9bff703e]Verrek, dat wist ik ook niet! :D[quote:1a9bff703e="WimB"]thanks wimb[/quote:1a9bff703e]Geen probleem, jij ook bedankt voor het aandacht vestigen op het handige DOM-trucje. ;) - Bas

[anoniem]

Hallo, Bedankt voor je antwoord en de link met een voorbeeld. Is het echter de bedoeling dat het bestand "sorttable.js" in een map op de website wordt geplaatst? (van de volgende regel: <script src="sorttable.js"> Is hiervoor nog een aparte taal nodig bij de provider welke dit programma start of moet het altijd werken? Met vriendelijk groeten, W. Tulp

[anoniem]

javascript is Client Side...... dus is er niks bij de provider nodig

[anoniem]

Ik vind deze iets mooier: http://www.letselplein.nl/~exemplarisch/sort-table/sort-table-rows.html

[anoniem]

[quote:48008c30af="wtulp"] Is het echter de bedoeling dat het bestand "sorttable.js" in een map op de website wordt geplaatst? (van de volgende regel: <script src="sorttable.js"> [/quote:48008c30af] Uiteraard. Verder is het handig om het hele pad op te geven in de script source; <script src="http://www.jouwhost/jouwmap/script.js"> t.

[anoniem]

Hallo, Bedankt voor de uitleg tot zover. Ik heb de lijsten nu zover dat ik ze door de bezoekers zelf kan laten sorteren. Nou zit ik met een nieuw probleem: De rijen met gegevens had ik om en om per rij een andere achtergrondkleur gegeven. Voorbeeld: tekst 1 op rij 1; [color=red:a4b4168021]tekst 2 op rij 2;[/color:a4b4168021] tekst 3 op rij 3; [color=red:a4b4168021]enz.[/color:a4b4168021] Wanneer ik nu de rijen door een bezoeker laat sorteren kloppen de kleuren niet meer. Ik krijg nu bijvoorbeeld de volgende situatie na een sortering: [color=red:a4b4168021]tekst 1 op rij 1;[/color:a4b4168021] [color=red:a4b4168021]tekst 2 op rij 2;[/color:a4b4168021] tekst 3 op rij 3; [color=red:a4b4168021]enz.[/color:a4b4168021] Wie weet of het mogelijk is om zowel de rijen te laten sorteren en de kleuren van de rijen om en om elkaar op te laten volgen? Met vriendelijke groeten, W.Tulp

[anoniem]

Heb je ook gekeken naar mijn linkje waar een "betere" versie staat?

[anoniem]

Hallo, Ik heb de link wel gezien en het ziet er ook goed uit. Maar... - kan ik de bron gewoon kopieren en plakken naar mijn eigen website? - kan ik de rijen gewoon om en om kleuren en blijven deze dan staan na het sorteren? - heb ik ook nog een bestand nodig welke ik bij de provider neer moet zetten? Met vriendelijke groeten, W.Tulp

[anoniem]

[quote:b18f311959]- kan ik de bron gewoon kopieren en plakken naar mijn eigen website?[/quote:b18f311959]Waarom niet?[quote:b18f311959]- kan ik de rijen gewoon om en om kleuren en blijven deze dan staan na het sorteren?[/quote:b18f311959]Heb je het uitgeprobeerd?[quote:b18f311959]- heb ik ook nog een bestand nodig welke ik bij de provider neer moet zetten?[/quote:b18f311959]Als ik het goed zag gebruikt hij twee JS bestanden. Eentje voor het sorteren en eentje voor het kleuren.

[anoniem]

Hallo, Het sorteren van de rijen is geen probleem, dit lukt. Ik heb de 2 bestanden kunnen downloaden: - sortTableRows.js - alternateRowColor.js Echter zie ik in het voorbeeld geen verschillende rijkleuren en ik weet ook niet zo gauw hoe ik dit wel kan inschakelen. Dit zal ongetwijfeld gebeuren met het bestand "alternateRowColor.js". Kan je me vertellen hoe ik hier achter kan komen? Is het misschien ook mogelijk om de cursor een handje te laten worden op het moment dat ik een kolom wil aangeven welke gesorteerd moet worden (zoals bij een link)? Met vriendelijke groeten, W.Tulp

[anoniem]

Hallo, Ik ben nou zover dat ik de rijen kan laten sorteren en dat de aanwijzer verandert in een handje wanneer ik over het onderwerp heen beweeg. Ik krijg het echter nog niet voor elkaar dat de rijen om en om gekleurd worden waarbij de kleuren van de rijen blijven staan wanneer ik de rijen opnieuw ga sorteren. Ik heb het bestand "alternateRowColors.js" geprobeerd om te doorgronden, echter ik kom hier niet uit. Onderstaand overzicht is de inhoud van dit bestand: ******** function alternateRowColors () { tables = document.getElementsByTagName ('table'); for (x = 0; x < tables.length; x++) { if (tbody = tables[x].getElementsByTagName ('tbody')) rows = tbody[0].getElementsByTagName ('tr'); else rows = tables[x].getElementsByTagName ('tr'); for (i = 0; i < rows.length; i++) { if (i%2) rows[i].setAttribute ('class', rows[i].getAttribute ('class') + ' even'); else rows[i].setAttribute ('class', rows[i].getAttribute ('class') + ' odd'); } } } ******** Het heeft iets te maken met de <tr class> welke even of odd gemaakt moet worden. Wanneer ik dat handmatig doe; zoals <tr class="odd"> en <tr class="even"> staan de kleuren er wel maar na de sortering staat alles weer door elkaar. Dus op de een of andere manier moet het programma zelf de even en odd functies aan de <tr class> toevoegen. Is er iemand die me hiermee verder kan helpen? Ik zit op het moment volledig vast! Met vriendelijke groeten, W. Tulp

[anoniem]

je moet ook de bijbehorende stylesheet gebruiken: [code:1:5bcd064553]/* copied from the alternate-rows stylesheet */ html, body { background: white; } td { border-right: 1px solid #D9D9D9; } #music .odd { background: #EDF3FE; } #music .even { background: white; } /* copied from the alternate-rows stylesheet */ th[onclick] { cursor: pointer; } th[onclick]:hover { background: #FC9; } th.ascending:after { content: " \2193"; /* an arrow, pointing down */ } th.descending:after { content: " \2191"; /* an arrow, pointing up */ }[/code:1:5bcd064553] wimb

[anoniem]

Was ik vergeten te vermelden. Maar die heb ik al in gebruik. En toch werkt het nog niet. W. Tulp

[anoniem]

Voorbeeld online?

[anoniem]

Een voorbeeld is te vinden op: http://www.timloto.org/nl/onderwijs_amt.html Deze pagina is nog in de ontwerpfase (let nog niet teveel op de tekst boven de rijen) maar hier heb ik wel de lijsten al zo staan dat ze gesorteerd kunnen worden (door te klikken op onderwerp of AMT) Wanneer de pagina geladen is staan alle rijen om en om gekleurd. Wanneer je nu klikt op onderwerp of AMT worden de lijsten opnieuw gesorteerd wat dus goed werkt, echter de kleuren van de lijnen kloppen niet meer. Door de pagina te verversen met bijvoorbeeld F5 staan de lijsten weer in hun oorspronkelijke stand met de kleuren weer wel om en om. Ik zou dus graag willen dat de kleuren altijd om en om blijven staan, dus ook na het sorteren. In principe zou dat dus al moeten kunnen maar er zit ergens een foutje. Met vriendelijke groeten, W. Tulp

[anoniem]

Ik heb de pagina even lokaal gezet en gekeken. Allses is goed, behalve de table. Er staat veel te veel in. Een class voor de td hoeft niet en ook de onclicks in de th's zijn niet nodig. Hier een stukje dat bij mij goed werkt[code:1:3d56d68ba0]<table id="music" border="0" width="600"> <thead> <tr> <th align="left">onderwerp</th> <th align="left">AMT (uitgave, jaar, maand, blz)</th> </tr> </thead> <tbody> <tr><td>Opel Astra DI-16V</td><td>59, 1999, 05, 65</td></tr> <tr><td>Hyundai Getz 1.3</td><td>63, 2003, 12, 61</td></tr> <tr><td>Volvo S60 D5</td><td>63, 2003, 12, 59</td></tr> <tr><td>Volvo V40 1.8 16V </td><td>57, 1997, 04, 67</td></tr> </tbody> </table>[/code:1:3d56d68ba0] wimb

[anoniem]

fyi: In Firefox zie ik helemaal geen achtergronden om en om. Na te laten sorteren wel, maar dan niet om en om...