不然就看這個簡陋的範例吧

Codepen

html

<div>
  <div class = "row">
    <div class = "col-sm-12" id = "result">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </div>
  <div class = "row form-group">
    <div class = "col-sm-12 text-center" id = "pagers">
    </div>
  </div>
</div>

js

// Create data
let data = [...Array(30)].map((el, index) => { return index + 1});

// Initial pagers
let pagers = '';
for(let i = 1; i <= data.length / 5; i += 1) {
  pagers += `<button class = "btn btn-outline-success pager">${i}</button>`;
}
$('#pagers').html(pagers);

// Pagers listener
$('.pager').on('click', (e) => {
  const page = e.target.innerText;
  changePage(page);
});

// Slice data and rerender
const changePage = (page) => {
  const limit = 5; // Each page show 5 rows of data
  const offset = (page - 1) * limit; // Data offset
  let newResult = '<ul>';
  data.slice(offset, offset + limit).forEach((el) => {
    newResult += `<li>${el}</<li>`;
  });
  newResult += '</ul>';
  $('#result').html(newResult);
}