Pagination with JavaScript
Pagination, with respect to web design, is the act of separating content into pages. Developers have discovered novel ways of implementing the prevalent "back 123 next" links we see on the internet today.
Here is my offering. This document introduces a fully self-contained JavaScript function for creating pagination links. The function takes four inputs:
| target div | The target element (unique) to output the links to. |
|---|---|
| url base | The URL to prepend the page number to (for making the links active). |
| current page | The page number we are currently viewing. |
| total pages | The total number of pages viewable. |
The function will then create a strip of pagination links which the user can click on. The code is generated entirely with client-side JavaScript using the DOM, and it works in both Firefox and Internet Explorer. By using the DOM, you don't have to transmit pagination links along with your page, potentially saving huge amounts of bandwidth.
The downside is that if they do not have JavaScript enabled, they will not see your pagination links. One way to live with this is to also offer pagination from the server if a certain cookie is set, and then offer a setter link in noscript tags. You must decide if you want such a tradeoff.
This is not a supported application. It is a piece of source code that you are responsible for retrofitting into your application. I make no guarantees that it will work. It has been reported working on the following browsers:
- Firefox - 1.5.x
- Firefox - 2.0.11
- Internet Explorer - 6.0.29