Example

This example page demonstrates the use of a disabled input field as page display instead of plain text. This way the page display has a fixed width and uses the same font as other form elements.

Javascript

$(function() {
    $("table")
        .tablesorter({widthFixed: true, widgets: ['zebra']})
        .appendTablesorterPagerControls({
            sizes: [2, 10, 30, 100], 
            initialSize: 10,
            pagedisplayInputSize: 15
        });
});

By setting the pagedisplayInputSize option, the page display is not inserted as plain (and styleable) text but into a disabled input field of the given size (15 characters).

Mini Table: 2 Lines

This is to demo that the pager controls won't be added to a table with no more rows than the minimum selectable table size (which is configured to 2 in this case)

Small Table: 10 Lines

Demos that the initial page size will hold the whole table, but the pager controls are added nonetheless, since a smaller page size is configured to be selectable.

Large Table