What is ReactJs Pagination ???
Who doesn’t know what is pagination but let’s start as a naive???
To better understand the concept, let's imagine reading a book without page numbers. It would be quite challenging to keep track of your progress or refer to specific sections. Pagination solves this problem by assigning page numbers, allowing you to easily communicate your progress to others and quickly locate information within the book.
ReactJS Pagination is a technique used in React applications to divide a large set of data into smaller, more manageable chunks called pages. It enables users to navigate through the data systematically by displaying a limited number of items on each page and providing controls such as previous and next buttons.
Moreover, consider a scenario where some pages of the book go missing. Without page numbers, it would be impossible to identify which pages or information were lost, leading to confusion and frustration. However, with pagination, you can precisely identify the missing pages and the content they contained, making it easier to address the issue.
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.
Visit the best Offshore Software Development Company.
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-paginate: A simple and customizable React-based pagination library that offers a variety of pagination styles and options.
- react-js-pagination: A React-based pagination library that provides a simple and easy-to-use pagination interface with support for custom styling and callbacks.
- react-bootstrap-table-next: A React-based table library that includes built-in pagination functionality and supports remote data loading.
- material-ui-pagination: A Material UI-based pagination library for React that offers a simple and flexible pagination interface.
- react-paginator: A lightweight React-based pagination library that provides customizable pagination controls with minimal configuration.
- rc-pagination: A React-based pagination library that offers customizable pagination controls and support for remote data loading
- 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 (
); } } ReactDOM.render(, 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.
Looking for react js development services?
Thank you !!!
No comments yet