How to send the page number, page limit in request body from react js Material-UI datatable for cursor pagination

1.2k Views Asked by At

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);
      }
})
0

There are 0 best solutions below