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

qzwqbdag 于 2022-12-18 发布在 React

关注(0)|答案(2)|浏览(236)

查看我的App.js组件中的以下代码：

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

现在我从这个实现中得到的结果是这样的：

但我所寻找的应该是这样的：

我的意思是，我不想看到我的所有网页上的用户界面，并显示其余的“...”
注：使用@material-ui/lab进行即时消息传递

reactjs

来源：https://stackoverflow.com/questions/72865690/display-number-of-page-in-react-js-using-material-ui-pagination

2条答案

按热度按时间

deyfvvtc1#

您的代码看起来不错，但是，您需要从@mui导入Pagination以实现所需的行为

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

赞(0）回复(0）举报 2022-12-18

z4iuyo4d2#

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

赞(0）回复(0）举报 2022-12-18

我来回答

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

2条答案

相关问题

热门标签

最新问答