Created
January 24, 2013 18:50
-
-
Save ourmaninamsterdam/4626375 to your computer and use it in GitHub Desktop.
Simple JS pagination script that can be easily modified to accept a JSON array. Known bug where pages 11-20 are skipped when paging through.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en-GB"> | |
| <head> | |
| <title>Simple JavaScript pagination</title> | |
| <meta charset="UTF-8"> | |
| <style> | |
| div{ | |
| position: relative; | |
| } | |
| #stage{ | |
| background: #ccc; | |
| height: 400px; | |
| position: relative; | |
| width: 1200px; | |
| } | |
| #page_nav li{ | |
| display: inline-block; | |
| list-style: none; | |
| padding: 5px; | |
| } | |
| #page_nav li a{ | |
| color: #000; | |
| cursor: pointer; | |
| text-decoration: underline; | |
| } | |
| input[type="text"]{ | |
| width: 30px; | |
| } | |
| #page_info{ | |
| display: block; | |
| border: solid #ccc; | |
| margin: 5px; | |
| padding: 5px; | |
| } | |
| #curr_page{ | |
| font-weight: bold; | |
| } | |
| #page_nav{ | |
| border: solid #ccc; | |
| margin: 5px; | |
| padding: 5px; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section> | |
| <h1>Simple JavaScript pagination</h1> | |
| <a href="http://" id="previous"><< Previous</a> | | |
| <a href="http://" id="next">Next >></a> | | |
| <a href="http://" id="reset">Reset</a> | | |
| <label>Go to Page <input type="text" name="page_input" id="page_input" value=""></label> | |
| <a href="#" id="goto">>></a> | |
| <span id="page_info">You are currently viewing page <label id="curr_page"></label></span> | |
| <ul id="results"></ul> | |
| <nav> | |
| <ul id="page_nav"> | |
| </ul> | |
| </nav> | |
| </section> | |
| <script type="text/javascript" src="simple-pagination.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| var config = { | |
| max_results: 100, | |
| max_per_page: 10, | |
| page: 1 | |
| }, | |
| no_of_pages = Math.ceil( config.max_results / config.max_per_page ), | |
| results = []; | |
| function init(){ | |
| for( var x = 0; x < config.max_results; x++ ){ | |
| results[x] = "Result " + x; | |
| } | |
| document.getElementById("next").onclick = function() { | |
| pager("next"); | |
| return false; | |
| }; | |
| document.getElementById("previous").onclick = function() { | |
| pager("previous"); | |
| return false; | |
| }; | |
| document.getElementById("reset").onclick = function() { | |
| pager("reset"); | |
| return false; | |
| }; | |
| document.getElementById("goto").onclick = function() { | |
| pager("goto", document.getElementById("page_input").value); | |
| return false; | |
| }; | |
| document.getElementById("page_nav").onclick = function(e) { | |
| var page = e.srcElement.getAttribute("data-page"); | |
| if(page){ | |
| pager("goto", page); | |
| } | |
| return false; | |
| }; | |
| update_page(); | |
| } | |
| function pager(action, page) { | |
| switch (action) { | |
| case "next": | |
| if( (config.page + 1) < no_of_pages ){ | |
| ++config.page; | |
| } | |
| break; | |
| case "previous": | |
| if( (config.page - 1) >= 1 ){ | |
| --config.page; | |
| } | |
| break; | |
| case "goto": | |
| config.page = page; | |
| break; | |
| case "reset": | |
| config.page = 1; | |
| break; | |
| default: | |
| break; | |
| } | |
| update_page(); | |
| } | |
| function build_nav() { | |
| var i, | |
| page_nav = ""; | |
| for( i = config.page; i < no_of_pages; i++ ){ | |
| page_nav += "<li><a data-page=" + i + ">" + i + "</a></li>\n"; | |
| } | |
| return page_nav; | |
| } | |
| function build_results(){ | |
| var i, | |
| tmp = "", | |
| start = ( config.page !== 1 )? config.page * config.max_per_page : 1, | |
| end = start + config.max_per_page, | |
| result; | |
| for( i = start; i < end; i++ ){ | |
| result = results[i]; | |
| if(typeof result !== "undefined"){ | |
| tmp += "<li>" + result + "</li>\n"; | |
| } | |
| else { | |
| tmp = ""; | |
| } | |
| } | |
| return tmp; | |
| } | |
| function update_page(){ | |
| document.getElementById("curr_page").innerText = config.page; | |
| document.getElementById("page_nav").innerHTML = build_nav(); | |
| document.getElementById("results").innerHTML = build_results(); | |
| } | |
| window.addEventListener("load", function() { | |
| init(); | |
| }); | |
| })(); |
Thank you so much for this.
very intuitive, thank you
case "goto":
if (page >= no_of_pages) {
config.page = no_of_pages;
document.getElementById("page_input").value = no_of_pages;
} else {
config.page = Number(page);
}
break;
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for this