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