I’ll address any questions you have… but here is an improved pattern you should follow to reduce code duplication.
As a sidenote though, you should consider not doing pagination on client-side. Since if you have a huge dataset, it would mean you need to download all the data before your page loads. Better to implement server-side pagination instead.
Fiddle: http://jsfiddle.net/Lzp0dw83/
HTML
<div id="listingTable"></div> <a href="javascript:prevPage()" id="btn_prev">Prev</a> <a href="javascript:nextPage()" id="btn_next">Next</a> page: <span id="page"></span>
Javascript (put anywhere):
var current_page = 1; var records_per_page = 2; var objJson = [ { adName: "AdName 1"}, { adName: "AdName 2"}, { adName: "AdName 3"}, { adName: "AdName 4"}, { adName: "AdName 5"}, { adName: "AdName 6"}, { adName: "AdName 7"}, { adName: "AdName 8"}, { adName: "AdName 9"}, { adName: "AdName 10"} ]; // Can be obtained from another source, such as your objJson variable function prevPage() { if (current_page > 1) { current_page--; changePage(current_page); } } function nextPage() { if (current_page < numPages()) { current_page++; changePage(current_page); } } function changePage(page) { var btn_next = document.getElementById("btn_next"); var btn_prev = document.getElementById("btn_prev"); var listing_table = document.getElementById("listingTable"); var page_span = document.getElementById("page"); // Validate page if (page < 1) page = 1; if (page > numPages()) page = numPages(); listing_table.innerHTML = ""; for (var i = (page-1) * records_per_page; i < (page * records_per_page); i++) { listing_table.innerHTML += objJson[i].adName + "<br>"; } page_span.innerHTML = page; if (page == 1) { btn_prev.style.visibility = "hidden"; } else { btn_prev.style.visibility = "visible"; } if (page == numPages()) { btn_next.style.visibility = "hidden"; } else { btn_next.style.visibility = "visible"; } } function numPages() { return Math.ceil(objJson.length / records_per_page); } window.onload = function() { changePage(1); };
UPDATE 2014/08/27
There is a bug above, where the for loop errors out when a particular page (the last page usually) does not contain records_per_page
number of records, as it tries to access a non-existent index.
The fix is simple enough, by adding an extra checking condition into the for loop to account for the size of objJson
:
Updated fiddle: http://jsfiddle.net/Lzp0dw83/1/
for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < obj