Page your data with ReactJs Pagination

Here I am back with my third blog on ReactJs Pagination. I will start with pagination and all the issues we as a developer’s face in web development so Let’s start with a very basic question …

 

What is Pagination ???

 

Who doesn’t know what is pagination but let’s start as a naive😅😅😅

 

Imagine you are reading a book without having a page number 😠😠😠, really won’t it be weird if there is no concept of paging.

 

So if your friend asks you how many pages did you finish what will you answer??

 

Or let’ us take the even worse case, suppose somehow there is an incident happened. And there you lost some pages from your book.

 

And the book had really important information. Then you have no idea which pages or which information even you lost !!! That’s really scary… isn’t it ??

 

Page your data with ReactJs Pagination

 

Going back to history, can you believe there used to be a time when books or documents used to be published without paging.

 

Only after 1500 c, it became a common practice to publish the books with the paging option.

 

Woah!!! some genius only would have figured out that !!!🍷🍷🍷

 

Page your data with ReactJs Pagination

 

Similarly, there is a concept of pagination in the digital world where we divide a document into the discrete pages/electronic pages.

 

These electronics pages rendered on a web browser and are called as web pages. Also, these pages and the content in these pages which is supposed to be rendered are related to each other using pagination.

 

Ways of rendering data

 

Progressive loading :

 

For the rendering of data we also have an option of progressive loading instead of pagination. A very successful example of progressive loading is  Facebook or Instagram news feed where we have an option of infinite scroll and the news feed keeps updating and renders or better say exposes as much as information they can deliver to end user.

 

Page your data with ReactJs Pagination

 

Pagination :

 

Page your data with ReactJs Pagination

 

But pagination has its own importance in terms of filtering and showing only relevant data, for example, the Google search engine.

 

So pagination becomes crucial when a user is searching for particular information and not consuming any random information.

 

There is an enormous number of inbuilt libraries are available to handling pagination in web development, especially in case of React also there are a huge number resources available which you can use directly to handle pagination for your application.

 

Some of the NPM and other pagination libraries available are

  • react-js-pagination
  • react-paginate
  • react-bootstrap/Pagination

 

It is also very ideal to use these existing libraries instead of re-writing your own, same as there is no need of re-inventing the wheel instead you can focus on other things.

 

But at the same time, it is also very important to know what is happening behind the scenes so that you can build and customize your application as per your need without compromising any requirements.

 

There is also a possibility of different logics being used for different pagination package available. For the implementation of react-pagination into your application read this great article react-jw-pagination.

 

Here I will be explaining about react-pagination with the help of code and some calculation.

 

getPager(totalItems, currentPage, pageSize) {

 

// default to first page

currentPage = currentPage || 1;

 

// default page size is 10

pageSize = pageSize || 10;

 

// calculate total pages

var totalPages = Math.ceil(totalItems / pageSize);

 

var startPage, endPage;

if (totalPages <= 10) {

// less than 10 total pages so show all

startPage = 1;

endPage = totalPages;

} else {

// more than 10 total pages so calculate start and end pages

if (currentPage <= 6) {

startPage = 1;

endPage = 10;

} else if (currentPage + 4 >= totalPages) {

startPage = totalPages – 9;

endPage = totalPages;

} else {

startPage = currentPage – 5;

endPage = currentPage + 4;

}

}

 

// calculate start and end item indexes

var startIndex = (currentPage – 1) * pageSize;

var endIndex = Math.min(startIndex + pageSize – 1, totalItems – 1);

 

// create an array of pages to ng-repeat in the pager control

var pages = […Array((endPage + 1) – startPage).keys()].map(i => startPage + i);

 

// return an object with all pager properties required by the view

return {

totalItems: totalItems,

currentPage: currentPage,

pageSize: pageSize,

totalPages: totalPages,

startPage: startPage,

endPage: endPage,

startIndex: startIndex,

endIndex: endIndex,

pages: pages

};

}

 

Let us take some example to understand the above code.

 

Case 1:

Assume current page = 1 , page size = 10 , total item = 160 ;

 

then total pages to be rendered = Math.ceil(160/10) = 16;

 

since current page = 1 and it has to render a total of 10 pages so according to the very first condition that is current page <= 6 follows. Which implies

 

start page = 1;

end page = 10

 

Case 2:

Assume current page = 12 , page size = 10 , total item = 160 ;

 

then total pages to be rendered = Math.ceil(160/10) = 16;

 

since current page = 12 and it still has to render a total of 10 pages so according to the second condition that is current page +4 (12+4 = 16) >= total no of pages(16) satisfies which implies

 

start page = 16-9 = 7

end page = 16

 

Case 3:

Assume current page = 7 , page size = 10 , total item = 160 ;

 

then total pages to be rendered = Math.ceil(160/10) = 16;

 

now current page = 7 and it still has to render total of 10 pages so according to the third condition that is current page +4 = (7+4 = 11) < = total no of pages(16) satisfies which implies

 

start page = 11-5 = 6

 

React pagination library can be used directly for paging functionality for any list of items. The required props here are an array of items of the list to be rendered and a callback function onChange which informs the parent component about the page change. The default value for the current page is 1, items per page are 10 and page range to be displayed is 5.

 

There are a lot of other packages available which you can use as per your requirements.

 

end page = 11+ 4 = 15

 

React pagination library can be used directly for paging functionality for any list of items. The required props here are an array of items of the list to be rendered and a callback function onChange which informs the parent component about the page change. The default value for the current page is 1, items per page are 10 and page range to be displayed is 5.

 

A react component using a pagination component, also the following code is taken from official NPM documentation of react-pagination. For more details please refer react-js-pagination.

 

import React, { Component } from “react”;

import ReactDOM from “react-dom”;

import Pagination from “react-js-pagination”;

require(“bootstrap/less/bootstrap.less”);

class App extends Component {

constructor(props) {

super(props);

this.state = {

activePage: 15

};

}

handlePageChange(pageNumber) {

console.log(`active page is ${pageNumber}`);

this.setState({activePage: pageNumber});

}

render() {

return (

<div>

<Pagination

activePage={this.state.activePage}

itemsCountPerPage={10}

totalItemsCount={450}

pageRangeDisplayed={5}

onChange={::this.handlePageChange}

/>

</div>

);

}

}

ReactDOM.render(<App />, document.getElementById(“root”));

 

There are a lot of other packages available which you can use as per your requirements and customize it too. If you have any doubts feel free to ask in the comment section.