react-bootstrap#Pagination JavaScript Examples
The following examples show how to use
react-bootstrap#Pagination.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Pagination.jsx From cosmoscan-front with Apache License 2.0 | 6 votes |
PaginationStyled = styled(Pagination)`
${({ theme: { blue, blue4 } }) => css`
.page-link {
color: ${blue};
}
.page-item.active .page-link {
background-color: ${blue};
border-color: ${blue};
}
.page-item.disabled .page-link {
color: ${blue4};
}
`}
`
Example #2
Source File: Pagination.js From flotiq-blog with MIT License | 6 votes |
CustomPagination = ({ page, numOfPages }) => {
const data = useStaticQuery(query);
const { pathPrefix } = data.site.siteMetadata;
return (
<Pagination className="mb-5 pb-5">
<Pagination.Prev
href={page > 2 ? `${pathPrefix}/${page - 1}` : `${pathPrefix}/`}
disabled={page === 1}
/>
{ page > 1 && (
<>
<Pagination.Item href={`${pathPrefix}/`}>{1}</Pagination.Item>
{ page > 4 && <Pagination.Ellipsis />}
</>
)}
{ page > 3 && <Pagination.Item href={`${pathPrefix}/${page - 2}`}>{page - 2}</Pagination.Item>}
{ page > 2 && <Pagination.Item href={`${pathPrefix}/${page - 1}`}>{page - 1}</Pagination.Item>}
<Pagination.Item active activeLabel="">{page}</Pagination.Item>
{page < numOfPages - 1
&& <Pagination.Item href={`${pathPrefix}/${page + 1}`}>{page + 1}</Pagination.Item>}
{page < numOfPages - 2
&& <Pagination.Item href={`${pathPrefix}/${page + 2}`}>{page + 2}</Pagination.Item>}
{ page < numOfPages && (
<>
{page < numOfPages - 3 && <Pagination.Ellipsis />}
<Pagination.Item href={`${pathPrefix}/${numOfPages}`}>{numOfPages}</Pagination.Item>
</>
)}
<Pagination.Next href={`${pathPrefix}/${page + 1}`} disabled={page === numOfPages} />
</Pagination>
);
}
Example #3
Source File: CoOwnersTable.jsx From mapstore2-cadastrapp with GNU General Public License v3.0 | 5 votes |
function CoOwnersTable({
data = [],
setData = () => {},
loadData = () => {},
bsSize,
selected = [],
setSelected,
onRowsSelected,
onRowsDeselected
}
) {
// pagination
const pageSize = 25;
const [loading, setLoading] = useState(false);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(0);
useEffect(() => {
setLoading(true);
loadData({ start: page * pageSize, limit: pageSize }).then(({ results, rows = [] }) => {
setData(rows);
setTotal(results);
setSelected([]);
setLoading(false);
}).catch(() => {
setLoading(false); // TODO: handle errors
});
}, [page]);
useEffect(() => {
setTimeout(() => {
window.dispatchEvent(new Event('resize'));
}, 1000);
}, []);
return (<>
<OwnersTable
data={data}
selected={selected}
onRowsSelected={onRowsSelected}
onRowsDeselected={onRowsDeselected} />
<Pagination
prev next first last ellipsis boundaryLinks
items={Math.ceil(total / pageSize)}
maxButtons={5}
bsSize={bsSize}
activePage={page + 1}
onSelect={e => setPage(e - 1)} />
<div style={{ "float": 'right' }}>{page * pageSize + 1}-{page * pageSize + data.length} of {total} ({selected.length} Selected)</div>
{loading ? <div style={{ "float": 'right' }}><Spinner spinnerName="circle" noFadeIn overrideSpinnerClassName="spinner" /></div> : null}
</>);
}
Example #4
Source File: PaginationBox.jsx From token-factory with MIT License | 5 votes |
PaginationBox = ({
handlePage,
rowsPerPage,
dataLength,
currentPage,
isDarkMode
}) => {
const [pages, setPages] = useState([]);
const createPageArr = useCallback(() => {
let pages = [];
const totalPages = Math.ceil(dataLength / rowsPerPage);
for (let i = 0; i < totalPages; i++) {
pages.push(i + 1);
}
setPages(pages);
}, [rowsPerPage, dataLength]);
useEffect(() => {
createPageArr();
}, [createPageArr]);
const handlePageNext = () => {
currentPage < pages.length
? handlePage(++currentPage)
: handlePage(currentPage);
};
const handlePagePrev = () => {
currentPage > 1 ? handlePage(--currentPage) : handlePage(currentPage);
};
return (
<div className={ isDarkMode ? styles.rootDark : styles.root }>
<Pagination>
<Pagination.Prev onClick={handlePagePrev}/>
{pages.map((item) => {
return (
<Pagination.Item
key={item}
onClick={() => handlePage(item)}
active={item === currentPage}
>
{item}
</Pagination.Item>
);
})}
<Pagination.Next onClick={handlePageNext}/>
</Pagination>
</div>
);
}
Example #5
Source File: LayoutPagination.jsx From cosmoscan-front with Apache License 2.0 | 4 votes |
LayoutPagination = ({
resp,
request,
isLoading,
limit,
address,
maxTotalPage,
}) => {
const [currPage, setCurrPage] = useState(1);
const totalPages = useMemo(() => {
if (!resp || !Object.keys(resp).length) return [];
if (resp.total > maxTotalPage) {
return Math.ceil(maxTotalPage / limit);
}
return Math.ceil(resp.total / limit);
}, [limit, maxTotalPage, resp]);
const jump = (page) => {
const pageNumber = Math.max(1, page);
setCurrPage(() => Math.min(pageNumber, totalPages));
request({
limit,
offset: Math.min(pageNumber - 1, totalPages) * 10,
address,
});
};
const next = () => {
setCurrPage((currentPage) => Math.min(currentPage + 1, totalPages));
request({ limit, offset: Math.min(currPage, totalPages) * 10, address });
};
const prev = () => {
setCurrPage((currentPage) => Math.max(currentPage - 1, 1));
request({ limit, offset: Math.max(currPage - 2, 0) * 10, address });
};
// const pageItems = useMemo(
// () =>
// Array(totalPages)
// .fill(null)
// .map((item, index) => (
// <Pagination.Item
// key={index}
// active={index + 1 === currPage}
// disabled={isLoading}
// onClick={() => jump(index + 1)}
// >
// {index + 1}
// </Pagination.Item>
// )),
// // eslint-disable-next-line react-hooks/exhaustive-deps
// [totalPages, isLoading, currPage],
// );
const currPageItems = useMemo(() => {
const currPageIndex = currPage - 1;
const pageItems = Array(totalPages)
.fill(null)
.map((item, index) => (
<Pagination.Item
// eslint-disable-next-line react/no-array-index-key
key={index}
active={index + 1 === currPage}
disabled={isLoading}
onClick={() => jump(index + 1)}
>
{index + 1}
</Pagination.Item>
));
return pageItems.slice(
Math.max(
0,
currPage >= totalPages ? currPageIndex - 2 : currPageIndex - 1,
),
Math.max(0, currPageIndex < 1 ? currPageIndex + 3 : currPageIndex + 2),
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currPage, totalPages, isLoading]);
return (
<PaginationStyled className="justify-content-end mt-3 mr-3">
<PaginationStyled.First
onClick={() => jump(1)}
disabled={currPage === 1 || isLoading}
/>
<PaginationStyled.Prev
onClick={prev}
disabled={currPage === 1 || isLoading}
/>
{currPageItems.map((el) => el)}
<PaginationStyled.Next
onClick={next}
disabled={currPage >= totalPages || isLoading}
/>
<PaginationStyled.Last
onClick={() => jump(totalPages)}
disabled={currPage >= totalPages || isLoading}
/>
</PaginationStyled>
);
}