This page mainly demonstrates the use and effect of the scrolling
template.
For this purpose the table below is rather wide and text wrapping inside the cells has been deactivated. So if your browser window is not very wide, the table will likely be wider than the window space (viewport). Normally this would result in the whole page overflowing. This is not very elegant as demonstrated in anti-example-tablewidth-noscroll.html!
The scrolling
template now makes the table itself scrollable while the rest of the page
stays put and aligned, and the pager control buttons stay in viewport (at least horizontally) all the time.
The fullwidth
template, which is applied additionally, aligns the pager buttons to the left
and to the right of the window and enlarges the table to full width in case the window should be very wide indeed,
wider than the table.
Javascript
$(function() {
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.appendTablesorterPagerControls({
sizes: [2, 10, 30, 100],
initialSize: 10
},
$.fn.appendTablesorterPagerControls.templates.fullwidth,
$.fn.appendTablesorterPagerControls.templates.scrolling
);
});
Don't forget to also include scrolling.css
and fullwidth.css
!
The templates just insert markup that still has to be formatted with the styles in those stylesheets.
If you don't load scrolling.css
, the table will not be locally scrollable. And if you don't load
fullwidth.css
, the alignment of the pager buttons will not work as expected.
Short Table
Demonstrates/tests that the classTableWrapper
option is also applied if no pager is added
(due to the table not having more rows that sizes[0]
).
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. |
Longer Table
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. |