React Pagination
Sun Jan 21 2024 21:31:29 GMT+0000 (Coordinated Universal Time)
Saved by
@eziokittu
#react.js
#javascript
#nodejs
// importing
import ReactPaginate from 'react-paginate';
// handling the pagination
const [page, setPage] = useState(0);
const handlePageClick = (num) => {
setPage(num);
};
// fetching all the employee details from the mongoDB database
const [loadedEmployees, setLoadedEmployees] = useState();
useEffect(() => {
const fetchEmployees = async () => {
try {
const responseData = await sendRequest(
`http://localhost:5000/api/employees/emp?page=${page}`
);
setLoadedEmployees(responseData.employees);
} catch (err) {
console.log("Error in fetching employees: "+err);
}
};
fetchEmployees();
}, [sendRequest, page]);
// returning this component
<ReactPaginate
containerClassName="flex gap-2 justify-center mt-4"
pageClassName="text-gray-500"
activeClassName="text-gray-900 border-2 border-black px-2"
previousClassName="text-gray-500"
nextClassName="text-gray-500"
breakLabel="..."
nextLabel="next >"
onPageChange={(selected) => handlePageClick(selected.selected + 1)}
pageRangeDisplayed={2}
marginPagesDisplayed={1}
pageCount={pageCount}
previousLabel="< previous"
renderOnZeroPageCount={null}
/>
// backend - controller methods
const getEmployeeCount = async (req, res, next) => {
let employeeCount;
try {
employeeCount = await Employee.countDocuments();
} catch (err) {
const error = new HttpError(
'Fetching employee count failed, please try again later.',
500
);
return next(error);
}
res.json({ employeeCount });
console.log("DEBUG -- Employee-Controller - Fetching employee count successful!");
};
const getEmployees = async (req, res, next) => {
const page = req.query.page || 0;
const employeesPerPage = 2;
let allEmployees;
try {
allEmployees = await Employee
.find()
.skip(page * employeesPerPage)
.limit(employeesPerPage);
} catch (err) {
const error = new HttpError(
'Fetching Employees failed, please try again later.',
500
);
return next(error);
}
if (!allEmployees || allEmployees.length === 0) {
return next(new HttpError('No employees found.', 404));
}
res.json({
employees: allEmployees.map((emp) => emp.toObject({ getters: true })),
});
console.log("DEBUG -- Employee-Controller - Fetching employees successful!");
};
content_copyCOPY
https://chat.openai.com/?__cf_chl_tk
Comments