這是我的工作分頁組件
import React from 'react';
// MATERIAL UI CORE
import IconButton from "@material-ui/core/IconButton";
// MATERIAL UI COMPONENTS
import FirstIcon from "@material-ui/icons/FirstPage";
import PrevIcon from "@material-ui/icons/ChevronLeft";
import NextIcon from "@material-ui/icons/ChevronRight";
import LastIcon from "@material-ui/icons/LastPage";
const Pagination = props => {
const {
num, // ARRAYS LENGTH
current, // CURRENT PAGE
onCurrent, // CHAGING THE CURRENT PAGE MINUS OR POSITION
fromPage, // START OF PAGINATION
toPage, // END OF PAGINATION - EXAMPLE 20/40 SO WERE SEEING 20 ARTICLES
pagely // HOW MANY ITEMS PER PAGE
} = props;
const pages = Math.ceil(num / pagely);
const first = current === 0;
const last = current === pages - 1;
return (
<div className = "pagination">
<div className = "icon">
<IconButton
onClick = {onCurrent.bind(this, 0)}
disabled = {first}>
<FirstIcon />
</IconButton>
</div>
<div className = "icon">
<IconButton
onClick = {onCurrent.bind(this, Math.max(current - 1, 0))}
disabled = {first}>
<PrevIcon />
</IconButton>
</div>
<div className = "text">
<span>Items {fromPage + 1} - {toPage} of {num}</span>
<br />
<span>Page {current + 1} of {pages}</span>
</div>
<div className = "icon">
<IconButton
onClick = {onCurrent.bind(this, Math.min(current + 1, pages - 1))}
disabled = {last}>
<NextIcon />
</IconButton>
</div>
<div className = "icon">
<IconButton
onClick = {onCurrent.bind(this, pages - 1)}
disabled = {last}>
<LastIcon />
</IconButton>
</div>
</div>
);
}
export default Pagination;
希望這可以幫助
丹尼爾
