javascript - how can i handle page links in pagination using ajax?

Question

my code is working fine but i want to know how can i handle pagination page-links (page Numbers) using jQuery Ajax.Can anybody know how to render page numbers and handle page links. Pagination Next button and Previous button working fine but page-links are not working. how can i render page-numbers and handle page-links using ajax?

Now it looks like this:

[Previous, 1, 2, 0, 5, 6, 7, 0, 10, 11, Next]

What do I do to display only 4 page numbers and not all of it ranging from the current page number, like this:

Previous 1 2 3 4 ... 11 Next

index.html

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous" id="Next">
                <span aria-hidden="true"><i class="fa fa-chevron-left"></i></span>
            </a>
        </li>
        <li class="page-item"><a class="page-link active" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Next" id="Next">
                <span aria-hidden="true"><i class="fa fa-chevron-right"></i></span>
            </a>
        </li>
    </ul>
</nav>

index.js

const fakeData = {
    data: [{
        row: 1,
        name: 'a'
    }, {
        row: 2,
        name: 'b'
    }, {
        row: 3,
        name: 'c'
    }, {
        row: 4,
        name: 'd'
    }, {
        row: 5,
        name: 'e'
    }, {
        row: 6,
        name: 'f'
    }, {
        row: 7,
        name: 'g'
    }],
    totalRecords: 7
};
// output Html
const Story = document.querySelector('#approvedList');
const pagination = document.querySelector('.pagination');

$(function () {

    var page = 1,
        records = 1,
        totalRecords = 0,
        search = '';

    // Run on page load
    fetchData();

    // Previous Page
    $('[aria-label="Previous"]').click(function () {
        if (page > 1) {
            page--;
        }
        fetchData();
    });

    // Next page 
    $('[aria-label="Next"]').click(function () {
        if (page * records < totalRecords) {
            page++;
        }
        fetchData();
    });
    // data fetching from API
    function fetchData() {
        totalCount = fakeData.totalCount;

        Story.innerHTML = '';

        fakeData.data.slice((page - 1) * records, page * records).map((object) => {
            Story.innerHTML +=
                `<tr >
                    <td>${object.row}</td>
                    <td>${object.name}</td>
                </tr > 
                `;
        })
        renderPagination();
    }


    $(document).on('click', '.page-item-numbers a', function () {
        page = parseInt($(this)[0].text);
        fetchData();
    });

    function renderPagination() {
        $('.page-item-numbers').remove();
        let pagesNumbers = Math.ceil(totalRecords / records);
        for (let i = 1; i <= pagesNumbers; i++) {
            $(`.pagination > li: nth - child(${i})`).after(` < li class="page-item page-item-numbers ${i == page ? 'active' : ''}" > <a class="page-link" href="#">${i}</a></ > `);
        }
    }

})

Answer 1

I created a fake data variable, your api result should be like that, contain a array of your data and a number that show total count of your data.

const fakeData = {
  data: [{
    row: 1,
    name: 'a'
  }, {
    row: 2,
    name: 'b'
  }, {
    row: 3,
    name: 'c'
  }, {
    row: 4,
    name: 'd'
  }, {
    row: 5,
    name: 'e'
  }, {
    row: 6,
    name: 'f'
  }, {
    row: 7,
    name: 'g'
  }],
  totalCount: 7
};

const Story = document.querySelector('#approvedList');

$(function() {

  var page = 1,
    records = 3,
    totalCount = 0,
    search = '';

  // Run on page load
  fetchData();

  $(document).on('click', '.page-item-numbers a', function() {
    page = parseInt($(this)[0].text);
    fetchData();
  });

  // Previous Page
  $('[aria-label="Previous"]').click(function() {
    if (page > 1) {
      page--;
    }
    fetchData();
  });

  // Next page 
  $('[aria-label="Next"]').click(function() {
    if (page * records < totalCount) {
      page++;
    }
    fetchData();
  });
  // data fetching from API
  function fetchData() {
    totalCount = fakeData.totalCount;

    Story.innerHTML = '';

    fakeData.data.slice((page - 1) * records, page * records).map((object) => {
      Story.innerHTML +=
        `<tr>
                                <td>${object.row}</td>
                                <td><a href="#" class="detaillink">${object.name}</a></td>
                            </tr>`;
    })
    renderPagination();
  }

  function renderPagination() {
    $('.page-item-numbers').remove();
    let pagesNumbers = Math.ceil(totalCount / records);
    for (let i = 1; i <= pagesNumbers; i++) {
      $(`.pagination > li:nth-child(${i})`).after(`<li class="page-item page-item-numbers ${i == page ? 'active': ''}" ><a class="page-link" href="#">${i}</a></li>`);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody id="approvedList">

  </tbody>
</table>

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous" id="Previous">
        <span aria-hidden="true"><i class="fa fa-chevron-left"></i></span>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next" id="Next">
        <span aria-hidden="true"><i class="fa fa-chevron-right"></i></span>
      </a>
    </li>
  </ul>
</nav>