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 January 15, 2021 at 12:38PM