使用 material-ui 分页在 React Js 中显示页数

Question

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:

but what im looking for should be look like this:

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

Answer 1

您的代码似乎没问题，但是，您需要从 @mui 导入 Pagination 以实现所需的行为

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

Answer 2

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