Как добавить нумерацию страниц для ответа ajax api?

Question

Я использую WordPress API и у меня есть сообщения в блоге WordPress, перечисленные на веб-странице php. Я хотел бы добавить нумерацию страниц, которая показывает номера страниц только при наличии записей.

Вот мой код (обновлен с помощью пользователя ниже)

    <div id="results"></div>


     <!-- PAGINATION  -->


                        <ul class="pagination text-center" role="navigation" aria-label="Pagination" data-page="6" data-total="16"> 
     <li class="pagination-previous disabled">Previous<span class="show-for-sr">page</span></li>

     <li class="current"><span class="show-for-sr">You're on page</span> 1</li>

     <li><a href="#"class="page-link" data-page_number ="2" data-per-page="1" aria-label="Page 2">2</a></li>
     <li><a href="#" class="page-link" data-page_number ="3" data-per-page="1" aria-label="Page 3">3</a></li>
     <li><a href="#" class="page-link" data-page_number ="4" data-per-page="1"  aria-label="Page 4">4</a></li>

     <li class="ellipsis" aria-hidden="true"></li>

     <li><a href="#" class="page-link" data-page_number ="12" data-per-page="1" aria-label="Page 12">12</a></li>
     <li><a href="#" class="page-link" data-page_number ="13" data-per-page="1" aria-label="Page 13">13</a></li>

     <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
    </ul>


    <script>



    $(document).on('click', '.page-link', function(){
          var page = $(this).data('page_number');
         // console.log(page) this works for testing
         myFetchPosts(page);
         }); 
</script>

Answer 1

Сначала вот документы WP REST API для разбивки на страницы: https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/

Далее:

$( document ).ready(function() {

// start with page 1
var page = 1;


// Move your API call to a reusable function
function myFetchPosts(page) {
    // use a template literal so we can add the page parameter
    var api_url = `http://example.com/wordpress/wp-json/wp/v2/posts?per_page=1&page=${page}`;
    $.ajax({
            url: api_url,
            contentType: "application/json",
            dataType: 'json',
            success: function(response){
                var len = response.length;
                for(var i=0; i<len; i++){
                    var id = response[i].id;
                    var date = response[i].date;
                    var slug = response[i].slug;
                    var excerpt = response[i].excerpt.rendered;



                    var tr_str = "<tr>" +
                        "<td align='center'>" + (i+1) + "</td>" +
                        "<td align='center'>" + date + "</td>" +
                        "<td align='center'>" + slug + "</td>" +
                        "<td align='center'>" + excerpt + "</td>" +


                        "</tr>" 



                        ;

                    $("#results")
                        .html('') // clear previous page
                        .append(tr_str); // add current page 

                    // increment page so the next time this is called it will fetch the next page
                    page += 1;    

            }    
        } 
    });


    // call our function onload.
    myFetchPosts(page);


    // then for the pagination you need to create some way for the user to click a button for more or something like that and call this function and pass in what ever page you need to get
    someclickablebutton.addEventListener('click', function(event){
        myFetchPosts(page);
    });
}