Paginador

by Christian Unigarro

HTML

<a href="#" class="js-btnPrev">Atras</a>
<a href="#" class="js-btnNext">Siguiente</a>

<ul id="pager"></ul>

CSS

#pager {
  margin: 20px;
}

#pager a {
  text-decoration: none;
  color: black;
}

#pager li {
  text-decoration: none;
  width: 20px;
  text-align: center;
  list-style-type: none;
  float: left;
  margin-left: 5px;
}

#pager a li {
  border: 1px solid gray;
  border-radius: 3px;
  text-decoration: none;
  width: 20px;
  text-align: center;
  list-style-type: none;
  float: left;
  margin-left: 5px;
}

JavaScript

var currentPageData = 1;
var objectData = [];

function logicPagination(pageIndex) {
  objectData = [];
  var totalPages = 10;
  var buttons = 3;
  var currentPage = pageIndex;
  var lowerLimit = currentPage;
  var upperLimit = currentPage;

  //console.log(currentPage);

  $('#pager').empty();

  /*var valCreciente = 0;
  
  for(var b = currentPage; b < (buttons+currentPage); b++) {
  		//console.log(b);
      if(valCreciente >= buttons){
      	valCreciente = 0;
      }
    	if (b == currentPage){
    		console.log('pagina actual ' + b);
        valCreciente++;
      } 
      else {
				console.log(b);
        valCreciente++;
      }
  }*/

  for (var b = 1; b < buttons && b < totalPages; b++) {
    if (lowerLimit > 1) {
      lowerLimit--;
      console.log('inicial = ' + lowerLimit);
      b++;
      if (currentPage == totalPages) {
        console.log('pasa arriba');
        lowerLimit--;
        b++;
      }
    }
    if (b < buttons && upperLimit < totalPages) {
      upperLimit++;
      console.log('final = ' + upperLimit);
      b++;
      console.log(lowerLimit);
      if (currentPage == 1) {
        console.log('pasa abajo');
        upperLimit++;
        b++;
      }
    }

    console.log('b = ' + b);
  }

  console.log('--------------------');

  //console.log(lowerLimit);

  for (var i = lowerLimit; i <= upperLimit; i++) {
    if (i == currentPage) {
      objectData.push({
        n: i,
        active: true
      });
      $('#pager').append('<li>' + i + '</li> ');
    } else {
      objectData.push({
        n: i,
        active: false
      });
      $('#pager').append('<a href="#"><li><em>' + i + '</em></li></a> ');
    }
  }

  if (lowerLimit == currentPage) {
    objectData.lowerLimit = true;
    objectData.upperLimit = false;
  } else if (upperLimit == currentPage) {
    objectData.lowerLimit = false;
    objectData.upperLimit = true;
  } else {
    objectData.lowerLimit = false;
    objectData.upperLimit = false;
  }

 ...