Bootstrap Pagination with Page Jump Input — Free Snippet

<div class="container py-5 text-center">
  <p class="text-muted small mb-3" id="bspageInfo">Page 1 of 24</p>
  <nav aria-label="Page navigation">
    <ul class="pagination justify-content-center bspage-list" id="bspageList"></ul>
  </nav>
  <div class="d-inline-flex align-items-center gap-2 mt-3">
    <span class="small text-muted">Jump to page</span>
    <input type="number" class="form-control form-control-sm" id="bspageInput" style="width:70px" min="1" max="24">
    <button class="btn btn-sm btn-dark" id="bspageGo">Go</button>
  </div>
</div>

.bspage-list .page-link { cursor: pointer; }
.bspage-list .page-item.disabled .page-link { cursor: default; }

const TOTAL = 24;
let current = 1;
const list = document.getElementById('bspageList');
const info = document.getElementById('bspageInfo');
const jumpInput = document.getElementById('bspageInput');

// A windowed page list: first, last, current, and one neighbour on each
// side, with "…" gaps — the same windowing shape a search-results pager
// needs once there are more pages than can reasonably fit on one row.
function pageWindow(cur, total) {
  const pages = new Set([1, total, cur, cur - 1, cur + 1]);
  const sorted = [...pages].filter(p => p >= 1 && p <= total).sort((a, b) => a - b);
  const out = [];
  let prev = null;
  for (const p of sorted) {
    if (prev !== null && p - prev > 1) out.push('…');
    out.push(p);
    prev = p;
  }
  return out;
}

function render() {
  list.innerHTML = '';

  const prevLi = document.createElement('li');
  prevLi.className = 'page-item' + (current === 1 ? ' disabled' : '');
  prevLi.innerHTML = '<a class="page-link">‹ Prev</a>';
  prevLi.addEventListener('click', () => goTo(current - 1));
  list.appendChild(prevLi);

  pageWindow(current, TOTAL).forEach(p => {
    const li = document.createElement('li');
    if (p === '…') {
      li.className = 'page-item disabled';
      li.innerHTML = '<span class="page-link">…</span>';
    } else {
      li.className = 'page-item' + (p === current ? ' active' : '');
      li.innerHTML = '<a class="page-link">' + p + '</a>';
      li.addEventListener('click', () => goTo(p));
    }
    list.appendChild(li);
  });

  const nextLi = document.createElement('li');
  nextLi.className = 'page-item' + (current === TOTAL ? ' disabled' : '');
  nextLi.innerHTML = '<a class="page-link">Next ›</a>';
  nextLi.addEventListener('click', () => goTo(current + 1));
  list.appendChild(nextLi);

  info.textContent = 'Page ' + current + ' of ' + TOTAL;
  jumpInput.value = '';
}

function goTo(p) {
  if (p < 1 || p > TOTAL || p === current) return;
  current = p;
  render();
}

document.getElementById('bspageGo').addEventListener('click', () => {
  const val = parseInt(jumpInput.value, 10);
  if (!Number.isNaN(val)) goTo(Math.min(TOTAL, Math.max(1, val)));
});
jumpInput.addEventListener('keydown', e => { if (e.key === 'Enter') document.getElementById('bspageGo').click(); });

render();