Pagination V06
Template Details
Author: Colorlib
Released: September 2026
License: CC BY 3.0
Description
A table footer for an orders list of 97 rows, with a rows-per-page select, a "Showing 21–30 of 97" range and first, previous, numbered, next and last buttons. Changing the page size keeps the first visible row on screen, and the range line is a live region. The table body is rendered from a data array, so every control really changes what is shown.
It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 185 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.
- Rows-per-page select that keeps your place when the size changes
- Live "Showing X–Y of N" range
- First and last buttons plus a five-page number window
- Disabled states and focus kept in the pager after re-rendering
- Horizontal scroll for the table on small screens, pager stays in view
Similar Templates
