JavaScript Pagination with jQuery
Rob — November 27, 2010 - 16:06
I have seen many examples of JavaScript and jQuery pagination on the web, but none of them was what I wanted. I like to use small, compact code to perform simple actions such as paginating a list of items using JavaScript and jQuery. So I decided to write my own version. The JavaScript is about 100 lines of code (less if you removed the empty lines and comments) and works quite well for what I needed it for. So I would like to share my code with other coders and web developers.
Below is an example of pagination using JavaScript and jQuery to iterate a list of items. To get the code, do a "view source" and copy everything between <!-- PAGINATION START --> and <!-- PAGINATION END --> then setup a blank skeleton HTML file (with the basic tags like <html>, <head> and <body>) and paste the code within the 'body' tags.
JavaScript Pagination with jQuery
item 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
item 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
item 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
item 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
item 5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
item 6 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
item 7 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
item 8 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
item 9 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
item 10 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
item 11 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
item 12 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mi ante, dictum non rutrum at, semper ac eros. Suspendisse ipsum ante, ultricies sit amet lobortis a, vulputate id diam. Sed id venenatis sapien. Donec sed mi velit, vel vehicula mi. Praesent condimentum interdum justo sed eleifend. Etiam vitae ligula leo.
I have attached an HTML file that demonstrates this pagination functionality. See below.
- Rob's blog
- Login to post comments