Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Pagination when 5 columns data in a row

I tired to show five blocks in the ui view. on click of next button next five data should display and hide first 5 data block like that click on next button ,display next set of 5. my code here using javscript/react

.parent{
    display: flex;
}

.child{
    margin: 2% 0 0 0;
    width: 33%;
}

 <div className="parent"  >
              {list &&  
              list.data.map((item, index) => (
                <div key={index} className="child">
                  {item.name}
                </div>
            ))}
           </div>

enter image description here

Tags:

2

Answers


  1. 0

    For a simple pagination you can use Array.slice()

        <div className="parent">
  {list &&
    list.data
      .map((item, index) => (
        <div key={index} className="child">
          {item.name}
        </div>
      ))
      .slice(pageNum * 5, (pageNum + 1) * 5)}
</div>;

    And add useState to change the pageNum with the button clicks.

    const [pageNum, setPageNum] = useState(0);

    Create clickHandlers for the buttons to increment/decrement pageNum.

    Login or Signup to reply.
  2. 0

    If you are trying to page data in React,

    if you know the current page index, page size and your data length; you can calculate the index offsets like so:

    const startIndex = useMemo(() => page * pageSize, [page, pageSize]);
const endIndex = useMemo(() => startIndex + pageSize, [pageSize, startIndex]);

    const { Fragment, StrictMode, useCallback, useEffect, useMemo, useState } = React;

const ALPHABET = Promise.resolve('ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''));

const bounded = (n, max, min = 0) => Math.min(max, Math.max(min, n));

const fetchPagedData = (startIndex, endIndex) =>
  ALPHABET.then(data => data.slice(startIndex, endIndex));

const Card = ({ value }) => (
  <div className="card">
    {value}
  </div>
);

const App = ({ title }) => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(0);
  const [pageSize, setPageSize] = useState(5);
  const [alphabetLength, setAlphabetLength] = useState(0);

  useEffect(() => {
    ALPHABET.then(data => setAlphabetLength(data.length));
  }, []);

  const pageMax = useMemo(() => Math.ceil(alphabetLength / pageSize) - 1, [pageSize, alphabetLength]);
  const startIndex = useMemo(() => page * pageSize, [page, pageSize]);
  const endIndex = useMemo(() => startIndex + pageSize, [pageSize, startIndex]);

  const changePage = useCallback((direction) => {
    setPage((currPage) => bounded(currPage + direction, pageMax));
  }, [pageMax]);

  useEffect(() => {
    fetchPagedData(startIndex, endIndex).then(setData);
  }, [endIndex, startIndex]);

  return (
    <Fragment>
      <div className="card-container">
       {data.map((letter, index) => <Card key={index} value={letter} />)}
      </div>
      <div className="controls">
        <button type="button" onClick={() => changePage(-1)} disabled={page === 0}>Prev</button>
        <span>{page + 1} / {pageMax + 1}</span>
        <button type="button" onClick={() => changePage(1)} disabled={page === pageMax}>Next</button>
      </div>
    </Fragment>
  );
};

ReactDOM
  .createRoot(document.getElementById("root"))
  .render(
    <StrictMode>
      <App />
    </StrictMode>
  );
    html, body, #root {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.card-container {
  display: flex;
  gap: 0.5rem;
}

.card {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.2rem solid black;
  font-family: Arial;
  font-size: 2rem;
  font-weight: bold;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search