Barrierefreie, sortierbare Tabellen mit jQuery
-
10. Dezember 2009
-
jQuery,
Accessibility
© jQuey Logo: The jQuery Project
Im vorerst letzten Blogpost, zu den während meiner Diplomarbeit bei Namics entstandenen jQuery Accessible Rich Internet Appllications, stelle ich sortierbare Tabellen vor. Mit dem Widget lassen sich standardkonforme HTML Tabellen sehr einfach um einige nützliche Funktionen erweitern oder man nutzt es als Grundlage komplexer Anwendungen in denen tabellarisch Daten dargestellt werden.
Andere Blog-Posts zu meiner Diplomarbeit:
Features
Einerseits ist möglich eine kleine Tabelle lediglich um eine reine Sortiermöglichkeit (nach Datum, Zahlen zu erweitern. Diese wird per CSS Klasse für jede Spalte definiert und kann derzeit nach Datum oder Zahlen (jeweils in deutscher oder internationaler Schreibweise) bzw. einfach alphabetisch erfolgen. Es bleibt möglich server-seitige Sortierung für spezielle Sortierungen oder User ohne Aktiviertes Java-Script anzubieten (Graceful Degradation).
Für komplexere und größere Tabellen kann ein bestimmte Menge an Spalten und Zeilen versteckt werden – für ausgeblendete Zeilen ist ein Pager integriert. Im allgemeinen ist das Widget darauf ausgelegt auch für komplexe Anforderungen anpassbar zu sein – hierzu wird am besten einen Blick auf die Functional Demo bzw. in die demo.js (in der ich zeige was möglich ist) geworfen. In meiner Diplomarbeit gehe ich auch auf die genaue Arbeitsweise des Widgets ein.
How To
Nachdem die benötigten Scripte eingebunden wurden, sollte unser Ausgangspunkt immer eine valide HTML Tabelle sein:
<table summary="Eine kurze Zusammenfassung was diese Tabelle enthält oder aussagt.">
<caption>Demo Tabelle</caption>
<thead>
<tr>
<th class="ui-table-asc ui-state-active ui-table-number">UID</th>
<th class="ui-table-number-de" style="min-width: 10em; color: red;">Decimal DE</th>
<th class="ui-table-deactivate"><a href="#server_site_order_only">false</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>119,111</td>
<td>Lorum ipsum</td>
</tr>
<tr>
<td>2</td>
<td>123,456</td>
<td>Lorum ipsum</td>
</tr>
<tr>
<td>3</td>
<td>666,666</td>
<td>Lorum ipsum</td>
</tr>
.
.
.
</tbody>
</table>
Wie bereits oben erwähnt werden auch per CSS Klassen die Eigenschaften jeder Spalte festgelegt. Für eine genaue Beschreibung bitte einen Blick in das Wiki bei GitHub werfen.
Die Tabellenköpfe (und damit zum Beispiel die Breite jeder Spalte) können nach belieben mit CSS gestaltet werden -- sie bleiben, im Gegensatz zum tbody, erhalten.
Für eine kleine Tabelle wie in unserem Beispiel würde der bloße Aufruf des Widgets bereits genügen, ich möchte hier aber noch einige Optionen vorstellen:
Tabellen JS
$(function() {
$("table").ariaSorTable({
rowsToShow: 10,
pager: true,
colsToHide: {
1: true
}
});
});In diesem Fall gebe ich an das maximal 10 Zeilen angezeigt werden und dafür der pager genutzt werden soll. Außerdem verstecke ich die erste Spalte.
Da auch in der Functional Demo davon Gebrauch gemacht wird, möchte ich hier noch kurz zeigen wie man auf die (pseudo) öffentlichen Methoden des Widgets zugreifen kann. Dabei beziehe ich mich auf das oben gezeigte minimal Beispiel.
Tabellen Methoden Code
// Widget Instanz holen
var widget = $("table");
// colsToHide Options-Array holen
var colsToHide = widget.ariaSorTable("option", "colsToHide");
// Änderungen am Array durchführen!
// Update der Tabellen Arrays und Neuzeichnung
widget.ariaSorTable('updateData');
widget.ariaSorTable('setHTML');
Hier sieht man wie die Sichtbarkeit der Spalten von außen und im Nachhinein geändert werden kann.
Demo und Download
jQuery Accessible RIA sorTable Demo @ GitHub
Wie allen anderen Widgets dieser Serie steht auch dieses unter Creative Commons BY-SALizenz und kann demzufolge auch für kommerzielle Projekte genutzt werden.
Die Widgets befinden sich weiterhin in Entwicklung und werden aktiv betreut. Kommentare, Bugs, Vorschläge oder Eigenentwicklungen sind mehr als Willkommen. Bitte kontaktiert mich in den Kommentaren oder über das Kontaktformular – am besten natürlich direkt bei GitHub wenn du ein Konto hast.
08. September 2012
Vielen Dank im Voraus und viel Glück, www.felixnagel.com ! :) Wünsche Ihnen viel Glück !
06. April 2012
Hey Thomas, ich hab dir eine Demo fertig gemacht. Die sollten die nötigen Schritte erklären: github.com/fnagel/jQuery-Accessible-RIA/blob/master/Table/update_data.html
Grüße Felix
04. April 2012
Hallo Felix,
ein schönes Plugin hast Du da geschrieben =)
Ich verwende ariaSortTable in meiner Anwendung.
Einzelne Zeilen werden mit AJAX modifiziert, um nicht die Seite neu laden zu müssen. Sobald ich die Sortierfunktion einer Spalte bemühe, so verliere ich die zuvor gemachten Änderungen.
Kannst Du mir sagen, wie ich die Daten der ariaSortTable-Instanz nach einem AJAX-update aktualisieren kann?
myTable.ariaSorTable('updateData') brigt nicht das gewünschte Ergebnis.
Danke, Gruß Thomas
26. August 2010
Danke für den Hinweis Dominik. Ist jetzt ebenfalls gefixed!
18. August 2010
Hallo Felix,
ich habe die neue Legacy Version bei mir eingebaut und die Sortierung funktioniert jetzt ohne Anpassungen.
Wenn ich mir den Code anschaue und auch die Demo teste, dann scheint mir die Sortierung der Datumswerte auch noch Probleme zu haben.
Diese geben ebenfall einen Boolean-Wert zurück statt einem Int. Selbst brauche ich zur Zeit keine Datumssortierung.
18. August 2010
Hey Dominik,
vielen Dank für den Hinweis und den Snippet. Lag wirklich an derm unzureichenden Vergleich.
Im IE gab es für den Master branch auch noch ein anderes Problem. Anscheinend funktioniert der selector :visible nicht mehr für den IE8. Ich hab das jetzt durch eine eigene Funktion ersetzt. Das betrifft aber nur jQuery 1.4.x -- mal sehen ob ich da was rausbekomme.
Ich hab das jetzt mal im Master Branch gefixed (noch nicht die Demo). Funktioniert jetzt in beiden Branches und in der Demo. Laut meinen Tests funktioniert das jetzt auch wieder in FF2 und IE8. Vielleicht magst du das auch nochmal gegen testen? 4 Augen sehen mehr als 2.
Die legacy Version folgt hoffentlich heute Abend -- wenn meine bessere Hälfte mich lässt.
Nochmal Danke!
Update:
Master und legacy branch sind jetzt wieder in allen Browsern voll funktionsfähig. Hier das issue im Bugtracker: github.com/fnagel/jQuery-Accessible-RIA/issues/closed
17. August 2010
Hallo...
ich hatte das Sortierproblem mit verschiedenen Browsern wie z.B. Chrome auf Linux oder IE auf Windows.
Ich benutze noch die Legacy Version von ariaSorTable und habe das Problem wie folgt gelöst:
_sortText: function (a, b) {
// 20:00:13
// Text, no html
var a_txt = a[sortIndex];
var b_txt = b[sortIndex];
if(a_txt.toString() == b_txt.toString()){
return 0;
}
if(a_txt.toString() > b_txt.toString()){
return 1;
}
if(a_txt.toString() < b_txt.toString()){
return -1;
}
}
17. Februar 2010
ja hatte es schon gesehen.
Nun gut also scheint es wohl nur im FF2 aufzutreten das Problem.
Mal schauen inwiefern das bei meinen zu verwendeten Zwecken zu Problemen führen könnte.
Danke.
17. Februar 2010
Hatte schon geantwortet, weiß nicht ob du das gesehen hast:
www.felixnagel.com/blog/artikel/2009/12/10/barrierefreie-sortierbare-tabellen-mit-jquery/
17. Februar 2010
so ich nochmal...
also es ist wirklich ein Fehler (zumindest bei mir).
aber die String Sortierung ist reproduzierbar und nicht zufällig, sondern folgt bestimmten reglen und wird immer gleich "sortiert".
Hier mal meine Beweise.
Nach 12 Klicks ist die Sortierung wieder die selbe wie am Anfang.
Sprich man klick 12 mal auf Sortierung und gelangt wieder zur Ausgangsliste.
Desweiteen jetzt mal die ersten 3 Kliks mit den UIDs um das zu vergleichen.
1. Klick - UID 3 + 2 + 4 + 5...
2. Klick - UID 61 + 3 +1 + 60 ...
3. Klick - UID 1 + 3 + 60 ...
und so weiter.
Diese Abfolge ist immer die Gleiche !
Eventuell hilft dir das bei der Fehlersuche.
17. Februar 2010
Ehrlich gesagt hab ich mit FF2 nie getestet. Bestätigen kann ich den Fehler aber. Woran das liegt müsste ich mal sehen, aber ich sehe da auch kaum einen Sinn drin. Priorität hat aber in jeden Fall die Portierung für die neuen Versionen von jQuery und UI. Hab mal nen Issue aufgemacht, wenn ich dazu komme werd ich sehen das ich das fixe. Vielleicht kannst du ja auch dabei helfen:
github.com/fnagel/jQuery-Accessible-RIA/issues/issue/23
jQuery UI kickt übrigens gerade den Support für FF 2 und außerdem gibt es seit über einem Jahr keine Sicherheitspatches mehr.
17. Februar 2010
servus...
also ich antworte jetzt nochmals hier, weil ich sonst nicht weiss wo.
Also ich gehe auf:
fnagel.github.com/jQuery-Accessible-RIA/Table/
Und dort wsortiere ich nun die "String" Spalte, indem ich immer wieder auf "String" klicke. Dabei sollten ja nur 2 Sortierungen rauskommen einmal aufsteigend und einmal absteigend. Bei den anderen Spalten "Decimal DE" oder "UID" funktioniert das auch, aber bei "String" nicht. Dort bekomme ich jedesmal eine andere Sortieung als quasi Ergebnis angezeigt.
Also immer wieder eine andere willkürliche Sortierung ohne erkennbare Sortierstrucktur.
Also immer wieder zufällig.
OS: WinXP SP2
Browser: Firefox 2.0.0.18
Ich werde es heute Abend mal auf einem anderen System + Browser + Loakl austesten, ob das da auch so ist oder nur hier !
17. Februar 2010
...erkennen. Es wird ganz normal sortiert, soweit ich erkennen kann. Kannst du mir genauer beschreiben was du tust? Vielleicht workt es auch nur so, die Dummy Daten sind nicht ganz optimal. Sicher das du nicht auf verschiedenen Seiten warst?
Mal abgesehen davon das HTML eben nicht unterstützt wird und der Link deshalb ganz oben steht. HTML Sortierung wollte ich aber ohnehin mal machen, also:
github.com/fnagel/jQuery-Accessible-RIA/issues
17. Februar 2010
servus...
kann es sein, dass die String Sortierung nicht funktioniert in deinem Sortier Ding ?
fnagel.github.com/jQuery-Accessible-RIA/Table/index.html
Sortiere mal die letzte Spalte.
Da wird immer anders sortiert. Oder blick ich die Funktionweise grad nicht ?
Konnte es jetzt noch nicht selbst an einem Script ausprobieren, sondern nur deine Demos anschauen.
über eine Antwort was da los ist würde ich mich freuen.
Danke.