Diese Seite demonstriert in erste Linie den Gebrauch und die Auswirkung des scrolling
-Templates.
Zu diesem Zweck wurde unten eine ziemlich breite Tabelle eingefügt (deren Text nicht innerhalb der Zellen umbrechen darf). Sofern Sie kein extrem breites Browserfenster verwenden, ist die Tabelle vermutlich breiter als das Fenster. Normalerweise würde damit die ganze Webseite überbreit und horizontal scrollbar. Das das nicht sonderlich elegant ist und sogar die Pager-Bedienung behindern kann, wird im "Anti-Beispiel" anti-example-tablewidth-noscroll.html anschaulich demonstriert.
Das scrolling
-Template bewirkt nun, dass allein die Tabelle horizontal scrollt, während der Rest
der Seite, insbesondere auch die Pager-Buttons, immer (zumindest horizontal) im sichtbaren Seitenbereich bleiben.
Das fullwidth
-Template, welches hier zusätzlich geladen wird, richtet die Pager-Buttons links und
rechts im Fenster aus und bewirkt außerdem, dass in extrem breiten Fenster (breiter als die Tabelle) die Tabelle
auf Seitenbreite gestreckt wird.
Javascript
$(function() {
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.appendTablesorterPagerControls({
sizes: [2, 10, 30, 100],
initialSize: 10
},
$.fn.appendTablesorterPagerControls.templates.fullwidth,
$.fn.appendTablesorterPagerControls.templates.scrolling,
);
});
Beachten Sie, dass zusätzlich die beiden CSS-Dateien scrolling.css
und fullwidth.css
eingebunden werden müssen! Die Templates alleine fügen nur Markup (DIV-Elemente mit bestimmten Klassen) in die
Seite ein, für die eigentliche Darstellung ist das CSS verantwortlich.
Ohne scrolling.css
z.B. wird das lokale Scrollen der Tabelle nicht funktionieren.
Und ohne fullwidth.css
werden die Pager-Buttons nicht wie gewünscht ausgerichtet.
Kurze Tabelle
Demonstriert/testet, dass die Option classTableWrapper
auch zur Anwendung kommt, wenn wegen zu kurzer
Tabelle gar kein Pager zur Tabelle hinzugefügt wird.
Name | Major | Sex | English | Japanese | Calculus | Geometry | More |
---|---|---|---|---|---|---|---|
Student01 | Languages | male | 80 | 70 | 75 | 80 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student02 | Mathematics | male | 90 | 88 | 100 | 90 | At vero eos et accusam et justo duo dolores et ea rebum. |
Längere Tabelle
Name | Major | Sex | English | Japanese | Calculus | Geometry | More |
---|---|---|---|---|---|---|---|
Student01 | Languages | male | 80 | 70 | 75 | 80 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student02 | Mathematics | male | 90 | 88 | 100 | 90 | At vero eos et accusam et justo duo dolores et ea rebum. |
Student03 | Languages | female | 85 | 95 | 80 | 85 | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. |
Student04 | Languages | male | 60 | 55 | 100 | 100 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student05 | Languages | female | 68 | 80 | 95 | 80 | At vero eos et accusam et justo duo dolores et ea rebum. |
Student06 | Mathematics | male | 100 | 99 | 100 | 90 | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. |
Student07 | Mathematics | male | 85 | 68 | 90 | 90 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student08 | Languages | male | 100 | 90 | 90 | 85 | At vero eos et accusam et justo duo dolores et ea rebum. |
Student09 | Mathematics | male | 80 | 50 | 65 | 75 | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. |
Student10 | Languages | male | 85 | 100 | 100 | 90 | |
Student11 | Languages | male | 86 | 85 | 100 | 100 | |
Student12 | Mathematics | female | 100 | 75 | 70 | 85 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student13 | Languages | female | 100 | 80 | 100 | 90 | At vero eos et accusam et justo duo dolores et ea rebum. |
Student14 | Languages | female | 50 | 45 | 55 | 90 | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. |
Student15 | Languages | male | 95 | 35 | 100 | 90 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student16 | Languages | female | 100 | 50 | 30 | 70 | At vero eos et accusam et justo duo dolores et ea rebum. |
Student17 | Languages | female | 80 | 100 | 55 | 65 | Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. |
Student18 | Mathematics | male | 30 | 49 | 55 | 75 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Student19 | Languages | male | 68 | 90 | 88 | 70 | At vero eos et accusam et justo duo dolores et ea rebum. |