Pagination | 더넥스트웹리서치랩

Basic

const props = {
  maxPage: 10,
  totalPage: 15,
};
const state = {
  currentPage: 1,
  get pages () {
    const currentPageIndex = Math.ceil(state.currentPage / props.maxPage);
    const startPage = (currentPageIndex - 1) * props.maxPage + 1;
    const pageLength = Math.min(props.maxPage, props.totalPage - startPage + 1);
    return Array.from({length: pageLength}).map((_value, index) => startPage + index)
  }
};
const mutation = {
  mutateCurrentPage: (page) => {
    state.currentPage = page;
  }
};
const actions = {
  handleNext: () => {
    mutation.mutateCurrentPage(state.currentPage + 1);
  },
  handlePrev: () => {
    mutation.mutateCurrentPage(state.currentPage - 1);
  }
};

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button onclick="actions.handlePrev(); render()">Prev</button>
  <button onclick="actions.handleNext(); render()">Next</button>

  <div id="pagination"></div>

  <script src="pagination.js"></script>
  <script>
    const render = () => {
      const html = `<ul>${state.pages.map(v => {
        return `<li>${v}: ${v === state.currentPage ? 'Selected' : ''}</li>`
      }).join('')}</ul>`
      document.querySelector('#pagination').innerHTML = html
    }

    window.onload = () => {
      render()
    }
  </script>
</body>
</html>

이전/다음 버튼 노출 조건

const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );

const toPaginationGroup = (totalPage, maxPage) => {
  const pagination = Array
    .from({length: totalPage}, (v, i) => i + 1);
  return chunk(pagination, maxPage);
};

const props = {
  maxPage: 10,
  totalPage: 24,
};
const state = {
  paginationGroupIndex: 0,
  currentPage: 1,
  get paginationGroup () {
    return toPaginationGroup(props.totalPage, props.maxPage)
  },
  get pages () {
    return state.paginationGroup[state.paginationGroupIndex]
  },
  get hasNext () {
    const groupLength = state.paginationGroup.length;
    if (groupLength === 1) {
      return false;
    }
    return groupLength - 1 > state.paginationGroupIndex;
  },
  get hasPrev () {
    return state.paginationGroupIndex > 0;
  },
};
const mutation = {
  changeCurrentPage: (page) => {
    state.currentPage = page;
  }
};
const actions = {
  handleNext: () => {
    state.paginationGroupIndex += 1;
    mutation.changeCurrentPage(state.pages[0])
  },
  handlePrev: () => {
    state.paginationGroupIndex -= 1;
    mutation.changeCurrentPage(state.pages[state.pages.length - 1])
  }
};

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="pagination"></div>

  <script src="pagination2.js"></script>
  <script>
    const render = () => {
      const nextButton = state.hasNext ?
        '<button onclick="actions.handleNext(); render()">Next</button>' :
        '';
      const prevButton = state.hasPrev ?
        '<button onclick="actions.handlePrev(); render()">Prev</button>' :
        '';
      const pagination = `<ul>${state.pages.map(v => {
        const button = `<button onclick="mutation.changeCurrentPage(${v}); render()">
          ${v}: ${v === state.currentPage ? 'Selected' : ''}
        </button>`;
        return `<li>${button}</li>`
      }).join('')}</ul>`

      const html = `
        ${prevButton}
        ${nextButton}
        ${pagination}
      `;
      document.querySelector('#pagination').innerHTML = html
    };

    window.onload = () => {
      render()
    }
  </script>
</body>
</html>

Basic ​

이전/다음 버튼 노출 조건 ​

Basic

이전/다음 버튼 노출 조건