JSFiddle - React, Tailwind, and code Playground

by poxel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul id="magPagination" class="pagination">
</ul>

JavaScript

var currentPage;
var totalPages = 11;

function updatePage(page) {
  $('#magPage_' + page).addClass("active");
  $('#magPage_' + page).siblings().removeClass("active");

}

function createPage(page) {
  $('#magPagination').append('<li class="" id="magPage_' + page + '"><a href="#">' + "..." + "</a></li>");
}

$(document).ready(function() {

  if (totalPages > 0) {

    var limitPagination = 5;
    for (var i = 0; i < limitPagination; i++) {
      var num = i+1;
      createPage(num);
    }
    
    if (totalPages > 5)
    {
      var dizaines = 0;
      $('#magPagination').append('<li class="" id="magPageSeparateur">...</li>');
      while (dizaines < totalPages)
      {
        dizaines += 10; 
        if (dizaines <= totalPages)
        {
          createPage(dizaines);
        }
      }
    }




  }
  currentPage = 1;
  updatePage(currentPage);

  $("ul#magPagination li").on('click', function() {
    currentPage = this.id.split("_")[1];
    updatePage(currentPage);
  });

});