ReactJs Pagination: How to Page Your Data With ReactJs Pagination?




ReactJs Pagination: How to Page Your Data With ReactJs Pagination?

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 ??   Page not found image  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 !!!???   Genius brain image  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.   Progressive loading in ReactJs Pagination 

ReactJs Pagination :

  ReactJs Pagination in goole  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 !!!  



Author Biography.

Editorial Team
Editorial Team

Content Writer

Join Our Newsletter.

Subscribe to CrowdforThink newsletter to get daily update directly deliver into your inbox.

CrowdforJobs is an advanced hiring platform based on artificial intelligence, enabling recruiters to hire top talent effortlessly.

CrowdforJobs

CrowdforApps brings to you the well researched list of the most successful and finest App development companies, Web software developers.

CrowdforApps

CrowdforGeeks is where lifelong learners come to learn the skills they need, to land the jobs they want, to build the lives they deserve.

CrowdforGeeks

CrowdforThink is a leading Indian media and information platform, known for its end-to-end coverage of the Indian startup ecosystem.

CrowdforThink
CFT

News & Blogs

f306e9d7339801a94f728f82586ee66e.jpg

How to setup Google reCAPTCHA in a ReactJS app?

Google’s reCAPTCHA is an industry standard when it comes to fighting bots. Integrating it i...

a7dde0c88b2c61976c79d9ce5b33f2dc.jpg

How to Import Components from React Bootstrap

React Bootstrap is one of the broadly utilized libraries in React, and its different parts are ut...

37af18311d4697c1cb6b46890f15fa40.png

Do you need a React framework?

Inspiration  Respond is a JavaScript library for building UIs, yet when we need to create a...

Top Authors

Lamia Rochdi is the Marketing Manager at Bell Flavors & Fragrances EMEA. A successful family-...

Lamia Rochdi

Zakariya has recently joined the PakWheels team as a Content Marketing Executive, shortly after g...

Zakariya Usman

Hey, I am Suraj - a full-time blogger and a social media expert currently working on the Growth H...

Suraj Kumar

Overall 3+ years of experience as a Full Stack Developer with a demonstrated history of working i...

Lokesh Gupta
CFT

Our Client Says

WhatsApp Chat with Our Support Team