Barrierefreie, sortierbare Tabellen mit jQuery

Avatar of Felix Nagel Felix Nagel - 10. Dezember 2009 - jQuery, Accessibility, Open Source, Studium

  • Features-jquery-aria

    © 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:

Oops, an error occurred! Code: 201708171702477d942ca5

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

Oops, an error occurred! Code: 20170817170247bab0d30d

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

Oops, an error occurred! Code: 20170817170247ef3c90d6

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

 

Wiki @ GitHub

 

 

Wie allen anderen Widgets dieser Serie steht auch dieses unter Creative Commons BY-SA Lizenz 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.

 

 

Die Kommentarfunktion ist für diesen Artikel deaktiviert.

14 Kommentare

Norwegian escort

08. September 2012

Vielen Dank im Voraus und viel Glück, www.felixnagel.com ! :) Wünsche Ihnen viel Glück !


Felix Nagel

06. April 2012

Neue Demo online

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


T J

04. April 2012

Tabelleninhalt nach Änderung per AJAX aktualisieren

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


Felix Nagel

26. August 2010

Datum auch gefixed

Danke für den Hinweis Dominik. Ist jetzt ebenfalls gefixed!


Dominik

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.


Felix Nagel

18. August 2010

Fixed im Master branch

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


Dominik

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;

}

}


sw

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.


Felix Nagel

17. Februar 2010

Gesehen?

Hatte schon geantwortet, weiß nicht ob du das gesehen hast:


www.felixnagel.com/blog/artikel/2009/12/10/barrierefreie-sortierbare-tabellen-mit-jquery/


sw

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.


Felix Nagel

17. Februar 2010

Firefox 2 wird eigentlich nicht mehr unterstützt

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.


sw

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 !


 


Felix Nagel

17. Februar 2010

Ich kann da leider kein Problem...

...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


 


sw

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.