Simple pagination in javascript

Question

I am trying to make pagination for my site. (http://anuntorhei.md)

CODE:

var someVar = 50;   function someStupidFunction() {         if (objJson.length > 50) {                 document.getElementById("nextPage").style.visibility = "visible";         }          if (someVar <= 50) {                 document.getElementById("prevPage").style.visibility ="hidden";         } else {                 document.getElementById("prevPage").style.visibility = "visible";         } }   function nextPage() {         document.getElementById("listingTable").innerHTML = "";          if (someVar < objJson.length) {                 document.getElementById("nextPage").style.visibility = "visible";         } else {                 document.getElementById("nextPage").style.visibility = "hidden";         }          for (var i = someVar - 50; i < someVar; i++) {                 document.getElementById("listingTable").innerHTML += objJson[i].adName + "<br>";         }          someVar += 50;          document.getElementById("prevPage").style.visibility = "visible"; }   function prevPage() {         document.getElementById("listingTable").innerHTML = "";          if (someVar > 50) {                 document.getElementById("prevPage").style.visibility = "visible";         } else {                 document.getElementById("prevPage").style.visibility = "hidden";         }          for (var i = someVar - 50; i < someVar; i++) {                 document.getElementById("listingTable").innerHTML += objJson[i].adName + "<br>";         }          someVar -= 50;          document.getElementById("nextPage").style.visibility = "visible"; } 

But I can't understand how to "hide" nextPage button when someVar is bigger than objJson.length.

And when I reach the "end", nextPage button disappear after than objJson is smaller than someVar. What is wrong in this code?

How can I change it to make it perfect? Sorry for my bad English, can't explain all what I need, hope you understand what I need!

Answer 1

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 < objJson.length; i++) 

Answer 2

I created a class structure for collections in general that would meet this requirement. and it looks like this:

class Collection {      constructor() {         this.collection = [];         this.index = 0;     }      log() {         return console.log(this.collection);     }      push(value) {         return this.collection.push(value);     }      pushAll(...values) {         return this.collection.push(...values);     }      pop() {         return this.collection.pop();     }      shift() {         return this.collection.shift();     }      unshift(value) {         return this.collection.unshift(value);     }      unshiftAll(...values) {         return this.collection.unshift(...values);     }      remove(index) {         return this.collection.splice(index, 1);     }      add(index, value) {         return this.collection.splice(index, 0, value);     }      replace(index, value) {         return this.collection.splice(index, 1, value);     }      clear() {         this.collection.length = 0;     }      isEmpty() {         return this.collection.length === 0;     }      viewFirst() {         return this.collection[0];     }      viewLast() {         return this.collection[this.collection.length - 1];     }      current(){         if((this.index <= this.collection.length - 1) && (this.index >= 0)){             return this.collection[this.index];         }         else{             return `Object index exceeds collection range.`;         }     }      next() {         this.index++;         this.index > this.collection.length - 1 ? this.index = 0 : this.index;         return this.collection[this.index];     }      previous(){         this.index--;         this.index < 0 ? (this.index = this.collection.length-1) : this.index;         return this.collection[this.index];     } } 

...and essentially what you would do is have a collection of arrays of whatever length for your pages pushed into the class object, and then use the next() and previous() functions to display whatever 'page' (index) you wanted to display. Would essentially look like this:

let books = new Collection(); let firstPage - [['dummyData'], ['dummyData'], ['dummyData'], ['dummyData'], ['dummyData'],]; let secondPage - [['dumberData'], ['dumberData'], ['dumberData'], ['dumberData'], ['dumberData'],]; books.pushAll(firstPage, secondPage); // loads each array individually books.current() // display firstPage books.next() // display secondPage