Create pagination for a WordPress REST API request-CodePudding

I need a push on a very precise subject. I have a fetch function to get results from a WordPress blog.

function getTags() {

    let page = 1,
    tagURL = `https://css-tricks.com/wp-json/wp/v2/posts?_embed&per_page=4&tags=833&page=1`;
    console.log(tagURL)

    $loader.style.display = "block";
    fetch(tagURL)
    .then(response => response.json())
    .then(dataTag => {
        dataTag.map(dataTag => {

        // Content

    })
    .catch(err => {
        console.log(err);
        let message = err.statusText || "Es ist ein Fehler aufgetreten...";
        $posts.innerHTML = `<p>Error ${err.status}: ${message}</p>`;
        $loader.style.display = "none";
    });

 }

I need to create a pagination that shows 4 posts per page, but I can't find the right way to do it. If someone from the community can guide me, please, I would be very grateful.

Greetings and thanks.

CodePudding user response：

Try this : You need to increased page variable and call function getTags

function getTags(page) {


let tagURL = 'https://css-tricks.com/wp-json/wp/v2/posts?_embed&per_page=4&tags=833&page=' page;
console.log(tagURL);

$loader.style.display = "block";
fetch(tagURL)
.then(response => response.json())
.then(dataTag => {
    dataTag.map(dataTag => {

    // Content
 

 

})
.catch(err => {
    console.log(err);
    let message = err.statusText || "Es ist ein Fehler aufgetreten...";
    $posts.innerHTML = `<p>Error ${err.status}: ${message}</p>`;
    $loader.style.display = "none";
});

 }

I have increaed variable value page after ajax response.

CodePudding user response：

you just need to rewrite the wrapper

let totalPages = 0,
  pageNumber = document.querySelector('#pageNumber')
getTags(1)

function getTags(page) {
  let tagURL = `https://css-tricks.com/wp-json/wp/v2/posts?_embed&per_page=4&tags=833&page=${page}`;
  console.log(tagURL)

  //$loader.style.display = "block";
  fetch(tagURL)
    .then(async (response) => {
      let dataTag = await response.json() // get json

      totalPages = response.headers.get('x-wp-totalpages')
      if (!pageNumber.textContent) {
        createPage(); // create page number
      }

      // on response received, empty it
      document.querySelector('#content').innerHTML = '' 
      dataTag.forEach(data => { // not map
        document.querySelector('#content').innerHTML  = `<li>${data.title.rendered}</<li>`
      })

    }).catch(err => {
      console.log(err);
      let message = err.statusText || "Es ist ein Fehler aufgetreten...";
      $posts.innerHTML = `<p>Error ${err.status}: ${message}</p>`;
      $loader.style.display = "none";
    });
}

function createPage() {
  for (var i = 0; i < totalPages; i  ) {

    let li = document.createElement('li')
    li.textContent = i   1
    li.onclick = function() {
      getTags(this.textContent)
    }
    pageNumber.appendChild(li)
  }
}

#pageNumber li{float: left;border: 1px solid #bbb;list-style: none;padding: 5px;cursor: pointer;}

<div id="content"></div>
<div id="pageNumber"></div>