I am trying to achieve cursor pagination on my data table material-ui-datatables.
I am using react js for the front end, express.js backend, and I am using mongo_DB for storage. I want to pass the page number, page limit previous and next as request body from my data table to API and I am using mangoose pagination plugin.
import React, { useState, useEffect } from "react";
import MUIDataTable from "mui-datatables";
import axios from "axios";
import PropagateLoader from "react-spinners/PropagateLoader";
// employee_info
function employee_info() {
let [loading, setLoading] = useState(true);
const [Response, setResponse] = useState([]);
const get_employee_details = () => {
axios
.get(configData.SERVER_URL + "/api/get_employee_info")
.then((res) => {
setResponse(res.data);
setLoading(false);
});
};
useEffect(() => {
const interval = setInterval(() => get_employee_details(), 10000);
return () => {
clearInterval(interval);
};
}, []);
if (loading === true) {
return (
<div style={style}>
<PropagateLoader loading={loading} color={"#36D7B7"} size={30} />
</div>
);
} else {
return EmployeeInfoTable(setResponse);
}
}
//DataTable
function EmployeeInfoTable(value) {
if (
typeof value == "undefined" ||
value == null ||
value.length == null ||
value.length < 0
) {
return <div></div>;
}
const columns = [
{ label: "Employee_ID", name: "employee_id" },
{ label: "Name", name: "name" },
{ label: "Department", name: "department" },
{ label: "Manger", name: "manager" },
];
const data = value.map((item) => {
return [
item.employee_id,
item.name,
item.department,
item.manager,
];
});
const options = {
caseSensitive: true,
responsive: "standard",
selectableRows: "none",
filter: false,
download: false,
print: false,
viewColumns: false,
};
return (
<MUIDataTable
title={"Employee_Details"}
data={data}
columns={columns}
options={options}
/>
);
}
Service API
const MongoPaging = require('mongo-cursor-pagination');
const express = require("express");
const router = express.Router();
router.get('/get_employee_info', async (req, res, next) => {
try {
const result = await MongoPaging.find(db.collection('employee'), {
query: {
employee: req.employee_id
},
paginatedField: 'created',
fields: {
manger: req.manger,
},
limit: req.query.limit,
next: req.query.next,
previous: req.query.previous,
}
res.json(result);
} catch (err) {
next(err);
}
})