ReactJs Pagination: How Do You Page Your Data With React.js Pagination?

This tutorial explains how to page your data with ReactJs Pagination by providing codes and three case examples to assist you.

sasi kiran

Feb. 06, 21 · Tutorial

Likes (6)

Comment

Save

21.2K Views

What Is React.js Pagination?

Who doesn’t know what Pagination is?

Imagine you are reading a book without any page numbers? It wouldn't be weird if there wasn't the concept of paging. So, if your friend asks you how many pages you finished, what will you answer? Or, let us take an even worse case; suppose somehow there is an incident that has happened, and you lost some pages from your book, and the book had really important information. Now, you have no idea which pages or which information you lost! That’s really scary, isn’t it?

Going back through history, can you believe there used to be a time when books and documents used to be published without page numbers? Only after 1500 c, it became a common practice to publish books with page numbers. If only some genius would have figured out that before.

Similarly, there is a concept of pagination in the digital world where we divide a document into discrete pages/electronic pages. These electronics pages are rendered on a web browser and are called web pages. Also, these pages and the content in these pages, which is supposed to be rendered are related to each other using React.js pagination.

Ways to Render Data

Progressive Loading

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

React.js Pagination

But, pagination has its own importance in terms of filtering and showing only relevant data. For example, the Google search engine. So, React.js 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 that are available to handle pagination in web development, especially in the case of React. Also, there are a huge number of 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 ideal to use these existing libraries instead of re-writing your own, the same as there is no need of reinventing 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 needed without compromising any requirements. There is also a possibility of different logics being used for different reactjs pagination packages available. For the implementation of react-pagination into your application, read this great article. Here, I will be explaining about react-pagination with the help of the code below and some calculations.

      JavaScript
     
x

   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 review some examples 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. This 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 the page range to be displayed is 5. There are a lot of other packages available which you can use as per your requirements. For example, end page = 11+ 4 = 15 React.js 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 the 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 to react-js-pagination.

      JavaScript
     
xxxxxxxxxx

import React, { Component } from "react"; 
importReactDOMfrom"react-dom"; 
importPaginationfrom"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 many other packages available that you can use according to your requirements, and you can customize it too. If you have any doubts, feel free to ask questions in the comment section. Thank you!

Data (computing)

Published at DZone with permission of sasi kiran. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

Trending