MediaWiki Diskussion:SortTableFilter.js

Tests und Dokumentation

Folgende Tabellen erhalten ihre Funktionalität durch zuweisen entspechender CSS Klassen einmal in der Tabellendefinition und im Tabellenkopf (s. Original-Doku von Matt Kruse auf http://www.javascripttoolbox.com/). Zusätzlich wurde die CSS Klasse booktable für das Layout benutzt für die Doku aber weggelassen. Mit den CSS Klassen wird die Funktionalität dieser JavaScript Tabellen „angeschaltet“, und derzeit unterstützt sind: table.table-autosort, table.table-autofilter, table-autostripe,table-sorted-asc, table-sorted-desc, table-filtered. Im folgenden ein paar Beispiele:

Beispiel 1: Sortieren + Filtern
Tabellendefinition: {| id="eins" class="table-autosort table-autofilter" Tabellenkopf: |- ! class="…"|          ↑ Hier im Tabellenkopf ermöglichen diverse CSS-Klassen spezielle Sortierungen (s. englische Doku): table-sortable:default → normal table-sortable:numeric_comma → Kommazahlen table-sortable:numeric → Zahlen mit englischer Punktnotation table-sortable:ignorecase → GROß/klein egal table-sortable:date → Datum …	Tabellendefinition: class="table-autosort table-autofilter" Taxon Farbe Größe Literatur a rot 12 ref b blau 11,4 ref b blau 9,0 ref
Beispiel 2: Filtern normal oder mit Texteingabe
Tabellendefinition: {| id="zweiA" class="table-autofilter" Tabellenkopf: |- ! class="table-filterable"| … oder für das Textfeld mit ! class="input" | …	Tabellendefinition: class="table-autofilter" Taxon Farbe Größe Literatur a rot 12 ref b blau 11,4 ref b blau 9 ref Tabellendefinition: class="table-autofilter" + class="input" (Spalte Literatur) Taxon Farbe Größe Literatur a rot 12 Müller 1987 b blau 11,4 Meier 1873 b blau 9 Schluze 2010
Beispiel 3: Sortieren
Tabellendefinition: {| id="drei" class="table-autosort" Tabellenkopf: |- ! class="table-sortable:default"| … oder ! class="table-sortable:numeric_comma"| …	Tabellendefinition: class="table-autosort" Taxon Farbe Größe Literatur a rot 12,5 ref b bläulich 1,4 ref c blau 2,0 ref d blau 8,3 ref

Kopiervorlage

{| id="meineID"  class="booktable table-autosort table-autofilter" 

|-
! class="table-sortable:default" |Taxon
! class="table-sortable:default" |Farbe
! class="table-sortable:numeric_comma" |Größe
! class="table-sortable:default" |Literatur

|-
! class="table-filterable"|<!-- Taxon -->
! class="table-filterable"|<!-- Farbe -->
! class="table-filterable"|<!-- Größe -->
! class="input"|<!-- Literatur -->

|-
|?<!-- Taxon -->
|?<!-- Farbe -->
|?<!-- Größe -->
|?<!-- Literatur -->

|}

Ignoranz Explorer: IE6+

Technische Anmerkungen

• „Fix fertig“: IE6 zeigte nur Schrott → tbody-autoinsert Problem. Leicht verrutschte Spaltenköpfe im Doldenblüterschlüssel, sonst aber i.O.

Zu tun

• Safari verschluckt alle Zeilen beim Filtern von table-autofilter Tabellen. Auf http://javascripttoolbox.com/lib/table/examples.php klappt es mit manueller CSS Angabe in th.tablefilter(?)
  • jQuery-Plugin datatable nutzen?
• Eventuell Tabellen-Assistent aus CHIP einbauen