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.
Join the DZone community and get the full member experience.Join For Free
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 LoadingFor 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 PaginationBut, 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:
Case 1Assume 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 2Assume 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 3Assume 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.
- Color Space Image Processing (explained with RGB, CMY, HSI, Color Models) 2020
- React.js Pagination: How Do You Page Your Data With React.js Pagination?
- How to Develop a Chat System Design like Facebook Messenger | Whatsapp
- What is a hospital management system? Including features and modules | uses -blog
- How is Diff Algorithm implemented in React.js?
Published at DZone with permission of sasi kiran. See the original article here.
Opinions expressed by DZone contributors are their own.