Beispiel

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.

Längere Tabelle