Dat kan alleen als je het in kleinere problemen opdeelt en die 1 voor 1 tackelt. Je kunt niet alles in 1 keer maken, zo werkt het gewoon niet.quote:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <table> <thead> <tr> <th> <a href="/hier/je/url?sort=a">a</a> </th> <th> <a href="/hier/je/url?sort=b">b</a> </th> <th> <a href="/hier/je/url?sort=c">c</a> </th> <th> <a href="/hier/je/url?sort=d">d</a> </th> </tr> </thead> <tbody> <!-- hier allemaal rijen met data --> </tbody> </table> |
1 2 3 4 5 6 7 8 | // klik op een header $('thead a').on('click', function(e) { // voorkom de standaardactie (== geen page request) e.preventDefault(); // haal de url op en stop de tbody van de opgehaalde pagina in de huidige tbody $('table tbody').load($(this).attr('href') + ' table tbody'); }); |
Ja, dit slaat op wat ik wil.quote:Op dinsdag 5 maart 2013 20:48 schreef Tijn het volgende:
Ik dacht je zoiets bedoelde:
[ code verwijderd ]
Een tabel met klikbare headers zodat je kunt sorteren op de kolommen.
De simpelste manier om daar een Ajax-variant van te maken is door een eventhandler op het klikken van de headers te zetten, die de nieuwe pagina op laten halen en de data van die pagina in je huidige tabel te injecteren:
[ code verwijderd ]
Heb je daar wat aan of slaat dat nergens op?
Bedankt voor je uitgebreide antwoord. Is er misschien ergens op internet documentatie te vinden hierover? Ik wil hier best meer over lezen.quote:Op dinsdag 5 maart 2013 21:46 schreef Tijn het volgende:
Al die model/controller/view-dingen spelen zich af op de server. Die gebruik je om de juiste data op de juiste manier van de server naar de client te sturen.
Waar het nu op gaat is hoe je de data ververst in je client. Dat betekent dat er een request naar je server moet, daar wordt de juiste data verzameld en daarna (dan heb je dus niks meer met MVC te maken) moet die data op de een of andere manier de data op je huidige pagina vervangen. Dat moet met Javascript, want dat is de enige programmeeromgeving die je tot je beschikking hebt in je client.
Wat ik in het voorbeeld hierboven heb gedaan is dezelfde url ophalen die je zonder Ajax-call zou gebruiken ( $(this).attr('href') ). Vervolgens ondersteund de .load()-functie van jQuery een selector zodat je alleen een gedeelte van dat document gebruikt. In dit geval is dat "table tbody", maar hoe dat precies in jouw website zit, hangt van de structuur op jouw pagina af.
Dit is wel een beetje "poor man's Ajax", omdat je in feite een hele nieuwe pagina opvraagt ipv alleen de nieuwe data.
Als je het écht goed wil doen, moet je je backend aanpassen om bij een Ajax-call alleen de data zelf naar buiten te sturen (bv als JSON) en vervolgens zelf in Javascript een functie schrijven om de gegevens in je JSON-data op de juiste plek in je tabel te zetten. Maar dat vergt dus wel nog wat werk, daar moet je maar net zin in hebben
Ben zelf ook aan het kijken met Meteor, misschien dat ik binnenkort wel een apart topic maak voor NodeJS.quote:Op woensdag 6 maart 2013 19:59 schreef Catch22- het volgende:
Mag hier. Van mij. lief he?
ik heb zelf alleen een beetje ervaring met meteor
En hoe bevalt het? Ik ben voor mijn werk wat JavaScript MVP/MVC frameworks aan het verkennen voor het ontwikkelen van SPA's. Backbone en AngularJS (i.z.m. jQuery en Bootstrap) staan hoog op het lijstje.quote:Op woensdag 6 maart 2013 19:59 schreef Catch22- het volgende:
[..]
ik heb zelf alleen een beetje ervaring met meteor
vond t wel oké. Was bijzonder basis hoor, meer oriënterend. Ga het in de toekomst misschien wel toepassenquote:Op woensdag 6 maart 2013 22:45 schreef Devv het volgende:
[..]
En hoe bevalt het? Ik ben voor mijn werk wat JavaScript MVP/MVC frameworks aan het verkennen voor het ontwikkelen van SPA's. Backbone en AngularJS (i.z.m. jQuery en Bootstrap) staan hoog op het lijstje.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body> <div id="maincontainer"> <div id="mainheader"> <div id="header"><h1>LOGO</h></div> <div id="bannerheader"></div> </div> <div id="maincontent"> <div id="navigatie">NAVIGATIE</div> <div id="content">CONTENT </div> </div> <div id="footer">Het test project</div> </div> </body> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | body{ margin: 0; text-align: center; background-color: #919191; } div#maincontainer{ margin: 20px auto 20px auto; width: 850px; text-align: left; border-style: solid; background-color: #E6FCB7; border-width: 6px; } div#mainheader{ width: 850px; height: 130px; } div#header{ width: 350px; text-align: center; float: left; font-size: 150% } div#bannerheader{ position: relative; left: 15px; top: 30px; background-image:url(banner.png); float: left; width: 468px; height: 60px; border-style: solid; } div#maincontent{ width: 844px; } div#navigatie{ border-right-style: solid; width: 20%; height: 250px; margin: 15px 0px 15px 0px; float: left; } div#content{ width: 78%; border:solid; float: left; } div#footer{ width: 100%; height: 55px; text-align: center; |
NodeJS ervaring reporting in .quote:Op woensdag 6 maart 2013 19:50 schreef TwenteFC het volgende:
Is er trouwens geen topic op FOK! voor NodeJS ?
Ik ga d'r binnenkort fanatiek mee bezig, het klinkt allemaal heel mooi dus ik ben benieuwd.quote:
In principe werkt het allemaal het zelfde. Ik doe meestal <br class="clear" /> met .clear{clear:both;} omdat ik dat nu eenmaal gewend ben.quote:Op dinsdag 12 maart 2013 07:57 schreef Catch22- het volgende:
Dat is wel heel vies
Google eens op clearfix
Ook goed heb zelf ervaring met Socket.IO, NowJS & Node zeg maarquote:Op dinsdag 12 maart 2013 08:01 schreef TwenteFC het volgende:
[..]
Ik ga d'r binnenkort fanatiek mee bezig, het klinkt allemaal heel mooi dus ik ben benieuwd.
Als er animo voor is wil ik dan ook wel een topic openen speciaal voor NodeJS en haar frameworks.
Een beetje goede op neerzetten.
Nee, het werkt niet hetzelfde:quote:Op dinsdag 12 maart 2013 08:22 schreef mstx het volgende:
[..]
In principe werkt het allemaal het zelfde. Ik doe meestal <br class="clear" /> met .clear{clear:both;} omdat ik dat nu eenmaal gewend ben.
Niet helemaal mee eens, met clearfix voeg je ook content (dus ruimte) toe via CSS. Of je het nou fisiek of virtueel doet, de methode is anders maar de werking blijft het zelfde (namelijk een clear:both toevoegen aan de content na het laatste floating-element).quote:Op dinsdag 12 maart 2013 10:48 schreef QM84 het volgende:
[..]
Nee, het werkt niet hetzelfde:
Met een <br class="clear" /> voeg je een extra fysiek html-element toe aan je pagina, terwijl je met de clearfix dit niet doet.
Het nadeel van het toevoegen van een <br> is, dat het voor ongewilde resultaten kan zorgen (je voegt een harde line-break toe, dus ruimte)
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |