n

HTML

CSS

JS

const Pagination = ({
  totalPage,
  page = 1,
  selector,
  siblingCount = 1,
  boundaryCount = 1,
  onSelected
}) => {
  const root = document.querySelector(selector);
  const numWrap = root?.querySelector('.pg-num');
  const btnPrev = root?.querySelector('.pg-btn.prev');
  const btnNext = root?.querySelector('.pg-btn.next');
  const dots = '<li class="pg-item dots">...</li>';

const createItem = (n, active = false) =>
    `<li class="pg-item${active ? ' active' : ''}">
      <a href="#" onclick="event.preventDefault()">${n}</a>
    </li>`;

const setBase = (page, total, before, after) => {
    let html = '';
    for (let i = before; i <= after; i++) {
      if (i <= 0) i = 1;
      if (i > total) break;
      html += createItem(i, page === i);
    }
    return html;
  };

const handleBtn = (page) => {
    btnPrev.classList.toggle('disabled', page === 1);
    btnNext.classList.toggle('disabled', page === totalPage);

const move = (step) => {
      const newPage = page + step;
      render(newPage);
      onSelected?.(newPage);
    };
    btnPrev.onclick = () => move(-1);
    btnNext.onclick = () => move(1);
  };

const render = (page) => {
    const s = siblingCount, b = boundaryCount > 0 ? boundaryCount : 1;
    const init = 3, pd = 2;
    const view = init + s * 2 + b * 2;
    const dir = pd + s + b;

let html = '', before = page - s, after = page + s;
    let left = b, right = b;
    const large = totalPage > view;

if (large) {
      if (page <= dir) {
        left = page - (1 + s);
        after += dir - page;
      }
      if (page + dir > totalPage) {
        right = totalPage - (page + s);
        before -= dir - (totalPage - page) - 1;
      }

for (let i = 1; i <= left; i++) html += createItem(i);
      if (page - dir > 0) html += dots;
      html += setBase(page, totalPage, before, after);
      if (totalPage - (page + dir) >= 0) html += dots;
      for (let i = totalPage - right + 1; i <= totalPage; i++) html += createItem(i);
    } else {
      html += setBase(page, totalPage, 1, totalPage);
    }

numWrap.innerHTML = html;

numWrap.querySelectorAll('.pg-item:not(.dots)').forEach((el) => {
      el.onclick = () => {
        if (el.classList.contains('active')) return;
        const val = Number(el.textContent);
        render(val);
        onSelected?.(val);
      };
    });

handleBtn(page);
  };

render(page);
};

Pagination({
  totalPage: 22,
  page: 1,
  selector: '.pg',
  siblingCount: 2,
  boundaryCount: 1,
  onSelected: (p) => console.log('Page:', p)
});

Trang chủ

HTML

CSS

JS