Beispiel

Templates fullwidth + scrolling

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