The example contains a hard coded array of 150 objects split into 30 pages (5 items per page) to demonstrate how the pagination logic works. Styling of the example is done with Bootstap 4.
npm install
command in the /server
folder.npm start
in the /server
folder, this will start the API on the URL http://localhost:4000.npm install
command in the /client
folder.npm start
in the /client
folder, this will build the app with webpack and automatically launch it in a browser on the URL http://localhost:8080.Below is the code for the paged items route (/api/items
) in the node server file (/server/server.js
) in the example, it creates a hardcoded list of 150 items to be paged, in a real application you would replace this with real data (e.g. from a database). The route accepts an optional page
parameter in the url query string, if the parameter isn’t set it defaults to the first page.
The paginate()
function is from the jw-paginate
package and accepts the following parameters:
totalItems
(required) - the total number of items to be pagedcurrentPage
(optional) - the current active page, defaults to the first pagepageSize
(optional) - the number of items per page, defaults to 10maxPages
(optional) - the maximum number of page navigation links to display, defaults to 10The output of the paginate function is a pager object containing all the information needed to get the current pageOfItems
out of the items
array, and to display the pagination controls in the React frontend, including:
startIndex
- the index of the first item of the current page (e.g. 0
)endIndex
- the index of the last item of the current page (e.g. 9
)pages
- the array of page numbers to display (e.g. [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
)currentPage
- the current active page (e.g. 1
)totalPages
- the total number of pages (e.g. 30
)I’ve set the pageSize
to 5
in the CodeSandbox example above so the pagination links aren’t hidden below the terminal console when the container starts up. In the code on GitHub I didn’t set the page size so the default 10 items are displayed per page in that version.
The current pageOfItems
is extracted from the items
array using the startIndex
and endIndex
from the pager
object. The route then returns the pager object and current page of items in a JSON response.
// paged items route
app.get('/api/items', (req, res, next) => {
// example array of 150 items to be paged
const items = [...Array(150).keys()].map(i => ({ id: (i + 1), name: 'Item ' + (i + 1) }));
// get page from query params or default to first page
const page = parseInt(req.query.page) || 1;
// get pager object for specified page
const pageSize = 5;
const pager = paginate(items.length, page, pageSize);
// get page of items from items array
const pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);
// return pager object and current page of items
return res.json({ pager, pageOfItems });
});
Since the pagination logic is handled on the server, the only thing the React client needs to do is fetch the pager information and current page of items from the backend, and display them to the user.
Below is the React home page component (/client/src/HomePage/HomePage.jsx
) from the example. The loadPage()
method determines the current page
by checking for the value in the url query params or defaulting to page 1, then fetches the pager
object and pageOfItems
for the current page from the backend API with an HTTP request.
The componentDidMount()
React lifecycle hook kicks off the first call to loadPage()
when the React component loads, then the componentDidUpdate()
React lifecycle hook calls loadPage()
when the page is changed with the pagination links.
The component renders the current page of items as a list of divs, and renders the pagination controls using the data from the pager
object. Each pagination link sets the page
query parameter in the url using the Link
React Router component with the search
parameter.
The CSS classes used are all part of Bootstrap 4.3, for more info see https://getbootstrap.com/docs/4.3/getting-started/introduction/.
import React from 'react';
import { Link } from 'react-router-dom';
class HomePage extends React.Component {
constructor(props) {
super(props);
this.state = {
pager: {},
pageOfItems: []
};
}
componentDidMount() {
this.loadPage();
}
componentDidUpdate() {
this.loadPage();
}
loadPage() {
// get page of items from api
const params = new URLSearchParams(location.search);
const page = parseInt(params.get('page')) || 1;
if (page !== this.state.pager.currentPage) {
fetch(`/api/items?page=${page}`, { method: 'GET' })
.then(response => response.json())
.then(({pager, pageOfItems}) => {
this.setState({ pager, pageOfItems });
});
}
}
render() {
const { pager, pageOfItems } = this.state;
return (
<div className="card text-center m-3">
<h3 className="card-header">React + Node - Server Side Pagination Example</h3>
<div className="card-body">
{pageOfItems.map(item =>
<div key={item.id}>{item.name}</div>
)}
</div>
<div className="card-footer pb-0 pt-3">
{pager.pages && pager.pages.length &&
<ul className="pagination">
<li className={`page-item first-item ${pager.currentPage === 1 ? 'disabled' : ''}`}>
<Link to={{ search: `?page=1` }} className="page-link">First</Link>
</li>
<li className={`page-item previous-item ${pager.currentPage === 1 ? 'disabled' : ''}`}>
<Link to={{ search: `?page=${pager.currentPage - 1}` }} className="page-link">Previous</Link>
</li>
{pager.pages.map(page =>
<li key={page} className={`page-item number-item ${pager.currentPage === page ? 'active' : ''}`}>
<Link to={{ search: `?page=${page}` }} className="page-link">{page}</Link>
</li>
)}
<li className={`page-item next-item ${pager.currentPage === pager.totalPages ? 'disabled' : ''}`}>
<Link to={{ search: `?page=${pager.currentPage + 1}` }} className="page-link">Next</Link>
</li>
<li className={`page-item last-item ${pager.currentPage === pager.totalPages ? 'disabled' : ''}`}>
<Link to={{ search: `?page=${pager.totalPages}` }} className="page-link">Last</Link>
</li>
</ul>
}
</div>
</div>
);
}
}
export { HomePage };
The tutorial code is available on GitHub
#reactjs #node-js #web-service