Beispiel

Diese Seite demonstriert die Anwendung zweier Templates. Wenn Sie dem Plugin-Aufruf mehrere Objekte mit Optionen übergeben, werden diese intern zu einer Optionsmenge verschmolzen. Genau das wird bei unten stehendem Aufruf ausgenutzt: Es werden drei Options-Objekte übergeben: Die Beispiel-individuellen Optionen und zwei Templates.

Das mitgelieferte Template tablewidth – in Kombination mit der zusätzlichen CSS-Datei tablewidth-centered.css – modifiziert das Ausgabemuster für die Anordnung der Steuerelemente analog zum fullwidth-Template. Es unterscheidet sich von letzterem dadurch, dass die Tabelle mitsamt den Pager-Controls darunter in ein DIV-Element mit display: inline-block eingebettet werden. Während das fullwidth-Template voraussetzt, dass alle Tabellen immer auf Seitenbreite gestreckt werden (andernfalls wären die Controls nicht rechtsbündig mit der Tabelle ausgerichtet), ist dieses Template für Tabellen vorgesehen, die schmaler als die Seite sein dürfen. Die Controls werden so immer korrekt mit der Tabelle ausgerichtet. (Als Nebeneffekt ist dadurch ein Strecken der Tabelle auf Seitenbreite nicht mehr möglich.)

The CSS-Dateitablewidth-centered.css unterscheidet sich von tablewidth.css nur darin, dass die Inline-Blocks mit Tabellen und Controls ihrerseits innerhalb der Seite horizontal zentriert werden, sofern sie schmaler sind als die Seite.

Ein zweites Template – triangeIcons – ersetzt die Standard-Buttonbeschriftungen durch alternative mit Unicode-Dreieckssymbolen. Beachten Sie dabei, dass dieses Template – anders als die Standardeinstellungen – Unicode-Zeichen für die Buttonbeschriftungen verwendet! Die JavaScript-Datei ist dazu UTF-8-kodiert. Da auch diese Beispiel-HTML-Seite UTF-8 verwendet, passt das zusammen. Beim Einbinden in eine anders kodierte HTML-Datei sollten Sie dagegen das Attribut charset="utf-8" zum script-Tag hinzufügen, mit dem Sie die Skriptdatei jquery.tablesorter.pager.appendcontrols.german.min.js laden!

Javascript

$(function() {
    $("table")
        .tablesorter({widgets: ['zebra']})
        .appendTablesorterPagerControls({
                sizes: [2, 10, 30, 100], 
                initialSize: 10,
                output: 'page # {page:input}/{totalPages} à',
                tooltips: {
                    pagedisplay: "displayed page (enter page number to go to) / total pages"
                }
            }, 
            $.fn.appendTablesorterPagerControls.templates.tablewidth,
            $.fn.appendTablesorterPagerControls.templates.triangleIcons
        );
});

Nicht vergessen, bei Nutzung obigen Scriptcodes auch die Datei tablewidth-centered.css mit einzubinden, denn das Template erzeugt nur die nötige HTML-Struktur, die aber noch per Stylesheet formatiert werden muss, um die eigentlichen Ausrichtungen zu aktivieren.

Kleine Tabelle: 10 Zeilen

Demonstriert den Fall, dass die Default-Größe des Pagers zwar die gesamte Tabelle fassen kann, so dass zunächst nicht geblättert werden kann, dass die Tabellengröße jedoch größer als die kleinste einstellbare Seitengröße ist: Die Steuerungselemente werden daher eingeblendet, da eine kleinere Tabellengröße auswählbar ist, für die sie benötigt werden.

Große Tabelle