What is ReactJs 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 ??    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 !!!???    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 reactjs pagination.  

Ways of rendering data

Progressive loading :

  For the rendering of data we also have an option of progressive loading instead of reactjs pagination. A very successful example of progressive loading is  Facebook or Instagram newsfeed 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.   

ReactJs Pagination :

   But pagination has its own importance in terms of filtering and showing only relevant data, for example, the Google search engine.   So reactjs 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 reactjs 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   Reactjs 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";

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 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.   If you like what we are doing, please follow Us on Facebook | Twitter | LinkedIn.

Be it a software developer, programmer, coder, or a consultant, CronJ has it all. CronJ has been a trustworthy company for startups, small companies, and large enterprises. Hire the web of experienced React developers for your esteemed project today. ReactJS Development Services

 Let CronJ Assist You..! Thank you !!!