Barrierefreie, sortierbare Tabellen mit jQuery

10. Dezember 2009, Felix Nagel in jQuery, Accessibility, Open Source, Studium

  • jQuey Logo: (c) 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>

Tabellen Konstruktion

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
    }
  });
});
JavaScript zur Wiget Initialisierung

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');

JavaScript zur Änderung der Tabelle

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.

0 Kommentare