Create a paging assistant with Javascript

Our Own Score

Today we are going to create a simple pagination helper script that will return below datas when we run the script.

Pages -> Returns the total number of pages for this site, giving the total number of elements per page.
Item Count -> Returns the total item for this site.
Page item count -> Returns the total item in that particular page, for example, page 0 has 10 items, and so on.
Page Index -> This will return the index of the page for the given item index (zero-based).

The PaginationHelper function takes two arguments, an array of page elements and a total element per page.

For example the below function takes in an array of six elements with three elements per page.

var helper = new PaginationHelper(['a','b','c','d','e','f'], 3);

The following is the complete code for the PaginationHelper function.

// The constructor takes in an array of items and a integer indicating how many
// items fit within a single page
function PaginationHelper(collection, itemsPerPage){
    this.itemi_count = collection.length;
    this.page_count = this.itemi_count/itemsPerPage - parseInt(this.itemi_count/itemsPerPage);
    if(this.page_count > 0.0)
        this.page_count = parseInt(this.itemi_count/itemsPerPage) + 1;
        this.page_count = parseInt(this.itemi_count/itemsPerPage);
    this.perpage = itemsPerPage;
    this.page_items = collection;

// returns the number of items within the entire collection
PaginationHelper.prototype.itemCount = function() {
     return this.itemi_count;

// returns the number of pages
PaginationHelper.prototype.pageCount = function() {
     return this.page_count;

// returns the number of items on the current page. page_index is zero based.
// this method should return -1 for pageIndex values that are out of range
PaginationHelper.prototype.pageItemCount = function(pageIndex) {
     if(pageIndex == 0)
         return this.perpage;
     else if(pageIndex > 0 && pageIndex < this.page_count)
	 return (this.itemi_count - (pageIndex * this.perpage));
     else if(pageIndex >= this.page_count)
	 return -1;

// determines what page an item is on. Zero based indexes
// this method should return -1 for itemIndex values that are out of range
PaginationHelper.prototype.pageIndex = function(itemIndex) {
    if(itemIndex < this.itemi_count && itemIndex >= 0)
        return parseInt(itemIndex/this.perpage);
    return -1;

When we run the below code we get

var helper = new PaginationHelper(['a','b','c','d','e','f'], 3)

console.log(helper.pageCount()) // 2
console.log(helper.itemCount()) // 6
console.log(helper.pageItemCount(0)) // 3
console.log(helper.pageItemCount(1)) // 3
console.log(helper.pageItemCount(2)) // -1

console.log(helper.pageIndex(5)) // 1
console.log(helper.pageIndex(2)) // 0
console.log(helper.pageIndex(20)) // -1
console.log(helper.pageIndex(-10)) // -1

As you can see, the program will simply return -1 when the index is out of range!


Leave a Reply

Notify of