How to create a custom javascript pagination?

问题

Hey guys am am working on a website and I have created a javascript pagination. Firstly please see my javascript and html. My Javascript

const resultEl = document.querySelector('.allstatus');
const pageSize = document.querySelector('select[name="page-size"]');
const pageCurr = document.querySelector('input[name="page-curr"]')
const resultCount = document.querySelector('.result-count')
const pageNoCurr = document.querySelector('.page-no-curr');
const pageNoCount = document.querySelector('.page-no-count')
const btnFirst = document.querySelector('.page-btn-first');
const btnPrev = document.querySelector('.page-btn-prev');
const btnNext = document.querySelector('.page-btn-next');
const btnLast = document.querySelector('.page-btn-last');

let results = [];

const getResultCount = () => results.length;
const getPageSize = () => +pageSize.value;
const getCurrPage = () => +pageCurr.value;
const getPageCount = () => Math.ceil(getResultCount() / getPageSize());

const pageResponse = (records, pageSize, page) =>
  (start => records.slice(start, Math.min(records.length, start + pageSize)))
  (pageSize * (page - 1));

const main = async () => {
  btnFirst.addEventListener('click', navFirst);
  btnPrev.addEventListener('click', navPrev);
  btnNext.addEventListener('click', navNext);
  btnLast.addEventListener('click', navLast);
  pageSize.addEventListener('change', changeCount);
  
  results = retrieveAllStatuses();
  updatePager(results);
  redraw();
};

const redraw = () => {
  resultEl.innerHTML = '';
  const paged = pageResponse(results, getPageSize(), getCurrPage());
  const ul = document.createElement('ul');
  paged.forEach(record => {
    const li = document.createElement('p');
    li.textContent = JSON.stringify(record.status);
    ul.append(li);
  });
  resultEl.append(ul);
};

const navFirst = (e) => {
  pageNoCurr.textContent = 1;
  pageCurr.value = 1;
  redraw();
}

const navPrev = (e) => {
  const pages = getPageCount();
  const curr = getCurrPage();
  const prevPage = curr > 1 ? curr - 1 : curr;
  pageCurr.value = prevPage;
  pageNoCurr.textContent = prevPage;
  redraw();
}

const navNext = (e) => {
  const pages = getPageCount();
  const curr = getCurrPage();
  const nextPage = curr < pages ? curr + 1 : curr;
  pageCurr.value = nextPage;
  pageNoCurr.textContent = nextPage;
  redraw();
}

const navLast = (e) => {
  pageNoCurr.textContent = getPageCount();
  pageCurr.value = getPageCount();
  redraw();
}

const changeCount = () => {
  updatePager();
  redraw();
};

const updatePager = () => {
  const count = getPageCount();
  const curr = getCurrPage();
  pageCurr.value = curr > count ? 1 : curr;
  pageNoCurr.textContent = curr > count ? 1 : curr;
  pageNoCount.textContent = count;
  resultCount.textContent = getResultCount();
};

const retrieveAllStatuses = () => [
  { status: "Do what is right not what is easy." },
  { status: "Hey there, WhatsApp is using me."},
  { status: "Too Busy" },
  { status: "Only you can give me that feeling." },
  { status: "I had a horribly busy day in converting oxygen into carbon dioxide" },
  { status: "Be yourself; everyone else is already taken" },
  { status: "Your attitude may hurt me, But main can Kill You!!"},
  { status: "Love is Blind, be careful." },
  { status: "'SUCCESS' is depend on U." },
  { status: "If you love someone set it free." },
  { status: "Love is sweet, When it's new. But it is sweeter when it's true." },
  { status: "Where there is love, there is life." },
  { status: "Not always 'Available' try your luck.." },
  { status: "I am not changed it's just I grew up and you should try too." },
  { status: "The biggest slap to your enemies is your success." },
  { status: "Born to express, not to impress."},
];

main();

My Html

  <div class="mainStatus">
   <h2 class="statusHeading">Latest English Status</h2>
  <div class="allstatus"></div>
  <div class="pagable-status">
    <label>Page <span class="page-no-curr">1</span> of <span class="page-no-count">1</span></label>
    <div class="pagable-actions">
      <button class="page-btn-first">&#x226A;</button>
      <button class="page-btn-prev">&#60;</button>
      <input type="number" name="page-curr" min="1" value="1" />
      <button class="page-btn-next">&#62;</button>
      <button class="page-btn-last">&#x226B;</button>
      <select name="page-size">
        <option>5</option>
        <option>10</option>
        <option>20</option>
      </select>
    </div>
    <label>(<span class="result-count"></span> items)</label>
  </div>
</div>

This javascript display a number of quotes (I have used the word status instead of quotes) in a page. The code creates a <ul> element and create a <li> element where a quote is placed. Ex: <li>Quoytee</li> But I need the quote to be placed in a <p> of <div><p></p></div> . That is, for each quote it should Itself create the <div><p></p></div> and place the quote inside <p>. Example

<div class="gg">
<p class="mm">The quote should be placed here.</p>
</div>

Thanks I advance for those who answer.

来源：https://stackoverflow.com/questions/65730586/how-to-create-a-custom-javascript-pagination