YouTube Icon

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.

CrowdforThink
CrowdforThink

CrowdforThink is the leading Indian media platform, known for its end-to-end coverage of the Indian startups through news, reports, technology and inspiring stories of startup founders, entrepreneurs, investors, influencers and analysis of the startup eco-system, mobile app developers and more dedicated to promote the startup ecosystem.

Join Our Newsletter.

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

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

Our mission is "Har Koi Dekhe Video, Har Ghar Dekhe Video, Ghar Ghar Dekhe Video" so we Provide videos related to Tutorials, Travel, Technology, Wedding, Cooking, Dance, Festivals, Celebration.

Apna Video Wala
CFT

News & Blogs

703d9a2733f1fc40f636f9d9cdeff391.png

Best React Libraries That Are Worth Trying In 2023

As per the Stack Overflow survey, React.js was the 2nd most popular web framework after Node...

f6dc0df3856bfe502f41ce4965b0a410.png

How To Deploy Your React Website in 2022!

Different React applications need different arrangement arrangements in view of their case. In th...

4248748df2304b0c9e733eec03bdce2d.png

Higher-Order Components in React

A higher-request component (HOC) is a high level method in React for reusing component rationale....

Top Authors

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

Lamia Rochdi

I’m Mertin Wilson a technician in a camera company and certified expert of different P...

Mertin Wilson

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

Zakariya Usman

Pankaj Singh is a Senior Digital Marketing Consultant with more than 2 years of experience in SEO...

Pankaj Singh
CFT

Our Client Says

WhatsApp Chat with Our Support Team