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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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 vote down vote up 
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>
  );
}