CODEWITHSUNDEEP
javascriptreactjs
HassanJalali
HassanJalali

Reputation: 131

display Number of page in React Js using material-ui Pagination

look at the code below in my App.js Component:

const App = () => {
  const [workstations, setWorkstations] = useState([]);
  let [page, setPage] = useState(1);
  const PER_PAGE = 1;

 useEffect(() => {
    loadWorkstations();
  }, []);

  const loadWorkstations = async () => {
    const request = await getWorkstations();
    const result = request.data;
    setWorkstations(result);
  };

 const count = Math.ceil(workstations.length / PER_PAGE);
  const _DATA = usePagination(workstations, PER_PAGE);

  const handleChange = (e, p) => {
    setPage(p);
    _DATA.jump(p);
  };

return (
 <Pagination
          count={count}
          size="large"
          page={page}
          variant="outlined"
          color="primary"
          onChange={handleChange}
        />
);
};

now the result that i got form this implementation is like this :

enter image description here

but what im looking for should be look like this : enter image description here

i mean i don't want to see all my pages on the UI and show the rest with "..."

Note: im using @material-ui/lab

Upvotes: 2

Views: 1178

Answers (2)

Danielle_Zeff
Danielle_Zeff

Reputation: 1

    const App = () => {
    const [workstations, setWorkstations] = useState([]);
    const [page, setPage] = useState(1);
    const [postsPerPage, setPostsPerPage] = useState(10);
    const [totalPosts, setTotalPosts] = useState();
    const lastPostIndex = page * postsPerPage;
    const firstPostIndex = lastPostIndex - postsPerPage;
    const currentPosts = workstations.slice(firstPostIndex,lastPostIndex);


  useEffect(() => {
    loadWorkstations();
  }, []);

 const loadWorkstations = async () => {
   const request = await getWorkstations();
   const result = request.data;
   setWorkstations(result);
   setPage(result.length);
};
return (
<Pagination
      count={count}
      size="large"
      page={page}
      variant="outlined"
      color="primary"
      numberOfPages={totalPages}
      totalPosts={currentPosts.length}
      postsPerPage={postsPerPage}
      setPage={page}
      
    />
  );
 };

Upvotes: 0

Abdullah Ansari
Abdullah Ansari

Reputation: 712

Your code seems alright, however, you need to import Pagination from @mui to achieve the desired behavior

import Pagination from '@mui/material/Pagination';

Upvotes: 1

Related Questions