20 juli 2012

Van Google spreadsheet naar sorteerbare tabellen


Hoe maak je van een Google spreadsheet die je publiceert op internet een tabel die je kunt sorteren op de verschillende velden?
Dat was de uitdaging die ik me vandaag gesteld had!
Nu heb ik al eerder geschreven over een manier om een tabel in HTML te sorteren. Daarbij verwees ik naar informatie die hier nog altijd beschikbaar is. Je vindt daar een javascript bestandje (sortable.js) dat je ergens zult moeten opslaan. Daarnaast moet je een stukje code opnemen in de pagina waar je tabel staat en een class toevoegen aan de tabel. Dat is alles!
Daarna kun je de kolommen in de tabel sorteren door op de titel van de kolom te klikken.

Natuurlijk wilde ik dat toepassen op Het Overzicht van EDUbloggers.

Het publiceren naar HTML van een Google spreadsheet is geen enkel probleem. Klik in de spreadsheet op Bestand, Publiceren op internet. Kies het blad dat je wilt publiceren en het bereik. Kopieer de url en daar heb je de tabel als HTML bestand. Kijk je echter naar de broncode van dit bestand dan weet je op voorhand al dat dit nooit gaat werken. Je zult een manier moeten vinden om alle overbodige opmaakcode te verwijderen.
Je kunt proberen de tabel direct in Blogger te plakken (in wysiwyg mode) maar "helaas" houdt Blogger die code netjes in stand. Toen bedacht ik me opeens dat Wordpress hier heel anders mee omgaat. Plak je de inhoud van een andere pagina in de Wordpress editor (in wysiwyg mode) dan zal Wordpress zoveel mogelijk overbodige code wegfilteren.

Dus zou mijn oplossing daarmee werken in een Wordpress blog? Helaas niet, want Wordpress staat standaard in de gratis versie niet toe om javascript te gebruiken. Blogger vindt dat wel goed en laat ik daar nu voor mijn weblog gebruik van maken! Ik kan dus de gefilterde code vanuit Wordpress naar Blogger plakken en het benodigde javascript toevoegen. Een laatste aanpassing aan de tabel en ik ben klaar!

Dit is de code die ik moet toevoegen aan de pagina om het sorteren mogelijk te maken:
<script src="http://www.karssenberg.nl/sorttable.js"></script>
<style>
/* Sortable tables */
table.sortable thead {
   background-color:#eee;
   color:#666666;
   font-weight: bold;
   cursor: pointer;
</style>
Het enige dat ik daarna nog hoef te doen is class="sortable" toevoegen aan de <table>
<table border="0" cellpadding="0" cellspacing="0" class="sortable">
Om het helemaal mooi te maken geef ik ook nog een Title="Klik om te sorteren" mee aan de eerste <tr> zodat het duidelijk is dat je daar kunt klikken.
Probeer het maar uit op onderstaande tabel! Een leuke vingeroefening die echter toch wat handwerk kost en niet helemaal te automatiseren valt. Ik weet dan ook niet of ik dit standaard op het overzicht ga toepassen. Zeker niet zo lang ik nog regelmatig mutaties en nieuwe edubloggers doorkrijg!

Naam weblog Voornaam en Achternaam Twitternaam Doelgroep(en)
2beJAMmed‬ Judith van Hooijdonk jujuutje HO
2beJAMmed‬ Marcel Schmitz marcelschmitz HO
Alles kan altijd beter Erno Mijland ernomijland
Amber Walraven’s Research and Teaching Amber Walraven amberwalraven HO
Apps in het onderwijs Frank Thuss frankthuss
Back2School Marcel Kesselring Marathonkeje
Barbara doet onderzoek Barbara Devilee HO
BB Bram Bruggeman brambruggeman
Bernard Blogt Bernard La Rivière VO
BIBLIOTHEEK 2.0 Jeroen van Beijnen timon_nl
Bits and History Jelmer Evers JelmerEvers Alle sectoren
Blogisch! Joel de Bruijn blogisch
chauffeursopleiding Carry Schinkel MBO
Connectiv Jaap Bosman jaapsoft HO
D.I.P. Astrid Schat astridschat MBO, HO
didactICT Paul Laaper sienjaal
Droog's Leren Delen Frans Droog FransDroog Alle sectoren
E-learn Weblog of Willem van Valkenburg Willem van Valkenburg twitter.com/ HO
e-Leren in het VO Jeroen Clemens jeroencl VO
Educatie Kennisnet Egbert Hulzebus egberteducatie MBO
Educational concept based on game design Robbert van der Pluijm rvanderpluijm MBO, HO
EduFloor blogt Florina Blokland florinablokland VO
Een kijkje in de kleuterklas Miranda Wedekind mirandawedekind PO
Erik Bolhuis Erik Bolhuis Ebolhuis
Forkenning Bert Plaat bertplaat MBO
Gerard Bierens Weblog zonder haast Gerard Bierens gbierens
Gerard Dummer Alles over Onderwijs en ICT Gerard Dummer gerarddummer
Hans on Experience Hans Mestrum hansmestrum
Helikon Fons van den Berg helikon
Henk van Gils/ Onderwijs en ICT Henk Van Gils Henkvangils PO
Hester IJsseling Hester IJsseling hesterij PO, Alle sectoren
Het ICTCafe Harry Dubois ictcafe PO, VO
Het wel en wee van een ICT-coördinator / iCOACH Leendert-Jan van Splunter eljee59 PO
Hoezo?! Jaap Haasnoot jaaphaasn Alle sectoren
ICT creatief Mats Eglin matseglin PO, VO
ICT-idee Herman van Schie hvanschie
ICT, leren en innoveren Jaap Jan Vroom jjvroom MBO
ICT&OnderwijsBLOG Pierre Gorissen PeterMcAllister
Innovatie in ICT en Onderwijs Patrick Koning pjkoning MBO
iPadders.eu Suzanne Lustenhouwer msluss VO
Irisvanbossum Iris van Bossum Iris013 MBO, HO, Alle sectoren
Jan Rotmans Jan Rotmans janrotmans
Jeroen Clemens On Digital Literacy Jeroen Clemens jeroencl VO, Alle sectoren
Juf Linda Humme Linda Humme lhumme PO
Karin blogt Karin Winters karinwinters
Kosmisch concreet, onderwijs in samenhang Andre Gilara andregilara PO
LearnOn Marieke Simonis MariekeSimonis
Leerkracht PO Frank Jongbloed leerkrachtpo PO
Leervlak.nl Jeroen Bottema jeroenbottema
Leraarworden Ilja van Bree iljaonline
Leraarworden: verkennen, ontdekken en delen! Tom Schoemaker leraarworden
Maatschappijleer & ICT Stefan van der Weide svanderweide VO, MBO
Manssen.nl ~ It's all in the Cloud" André Manssen Manssen PO
Margreet van den Berg - ICT en onderwijs Margreet van den Berg
Marijke Kaatee blog Marijke Kaatee MarijkeKaatee PO, VO
Meester Henk Henk Vink meesterhenkvink PO
Meester Michel maak(t) het onderwijs boeiend Michel Boer michelboer PO
meesterralph.nl Ralph van der Stroom meesterralph
Meneer Peters Martin Peters MeneerPeters VO, MBO
Moodlefacts Arnout Vree moodlefacts PO, VO, MBO
moqub's bibliotheek van dingen Liesbeth Mantel moqub
netwijs Doornbos Catharinus rinusd
On(der)wijs Hanneke de Frel hannekedefrel
onderwijs ICT nieuws Louis Hilgers louishilgers
Onderwijs in Grafieken iedere dag een grafiek over onderwijs Reinout van Brakel onderwysgrafiek Alle sectoren
OnderwijsActueel.NL Arjan Olsder OnderwijsAc
Onderwijsgek Marcel Schmeier Onderwijsgek
Onderwijsvanovermorgen Jef van den Hurk jefvandenhurk
Onderwijszaken Onderwijszaken Onderwijszaken
op weg naar CGO Hans Steeman hanzie54 MBO
OVM Yvonne Onbekend onderwijs
PaboNieuwsDienst Peter Broeders pabonieuws
Rekenapps Martine den Engelsen Credutien PO, VO, MBO, HO, SO, Alle sectoren
riaan lous Lous Riaan riaanlous
samara leren & ontwikkelen Marije Markus MarijeMarkus
Sander Niessing Sander Niessing sniessing VO
Sia's weblog Sia Vogel siavogel HO, Alle sectoren
Sjaboe Erwin Klaasse sjaboepaan
SmartKleuter Hanneke Meinen HannekeMeinen PO
Traintool Peter van der Reijden TrainTool
Trendmatcher tussen ICT en Onderwijs ™ Willem Karssenberg trendmatcher Alle sectoren
Vakblog – werken met informatie Raymond Snijders rsnijders
Warempel ict & onderwijs Tessa van Zadelhoff Warempel
Wauwel Rein Bijlsma ReinBijlsma Alle sectoren
Werkconcept Critical Skills Els Snels ElsSnels Alle sectoren
Wijs Vooruit Lex Hupe lexhupe Alle sectoren
Wilfred Rubens over Technology Enhanced Learning Wilfred Rubens wrubens Alle sectoren
Willem van Dinther Willem van Dinther willemvdinther MBO
Wiswijzer + Willem van Ravenstein wiswijzer2
WitBlauw - Basisonderwijs en ICT Remko Boers WitBlauwRB PO
Wonderijs Hannes Minkema hminkema VO, HO

Geen opmerkingen:

Een reactie plaatsen