Funcionalidad de paginación utilizando manillares js.

MANIFESTACIÓN

Estoy desarrollando una funcionalidad de paginación utilizando el manillar js y obteniendo los datos de JSON.

  1. Los primeros 5 resultados se mostrarán en la carga de la página.

  2. al hacer clic en la siguiente paginación se mostrará otro conjunto de 5 resultados y así sucesivamente.

  3. Si tengo el número total de resultados 100 al mostrar cada 5 Resultados en la página. Los números de página serán 1 de 20.

  4. si la paginación tiene más de 5 páginas, quiero mostrar “1,2,3 … último número de página (20)” igual viceversa
  5. en carga Botón anterior Debe estar oculto cada vez que se haga clic en la página siguiente, debe estar habilitado.

Solicítelo por favor mire esto y dé algún consejo / sugerencia sobre esto.

Debería ser como abajo

introduzca la descripción de la imagen aquí

Viceversa

¡Aprecie su amable ayuda!

Gracias

  • algunos ejemplos de código:

    $(function () { var opts = { pageMax: 5, postsDiv: $('#posts'), dataUrl: "searchResult.json" } function range(i) { return i ? range(i - 1).concat(i) : [] } function loadPosts(posts) { opts.postsDiv.empty(); posts.each(function () { var source = $("#post-template").html(); var template = Handlebars.compile(source); var context = { title: this.title, desc: this.body, }; var html = template(context); opts.postsDiv.append(html); }); } function paginate(pageCount) { var source = $("#pagination-template").html(); var template = Handlebars.compile(source); var context = { pages: range(pageCount) }; var html = template(context); opts.postsDiv.after(html); function changePage(pageNumber) { pageItems.removeClass('active'); pageItems.filter('[data-page="' + pageNumber + '"]').addClass('active'); loadPosts(data.slice(pageNumber * opts.pageMax - opts.pageMax, pageNumber * opts.pageMax)); } var pageItems = $('.pagination>li.pagination-page'); pageItems.on('click', function () { changePage(this.getAttribute('data-page')); }).filter('[data-page="1"]').addClass('active'); $('.pagination>li.pagination-prev').on('click', function () { gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) - 1; if (gotoPageNumber li.pagination-next').on('click', function () { gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) + 1; if (gotoPageNumber > pageCount) { gotoPageNumber = 1; } changePage(gotoPageNumber); }); } $.ajax({ dataType: 'json', url: opts.dataUrl, success: function (response_json) { data = $(response_json.records.page); dataCount = data.length; pageCount = Math.ceil(dataCount / opts.pageMax); if (dataCount > opts.pageMax) { paginate(pageCount); posts = data.slice(0, opts.pageMax); } else { posts = data; } loadPosts(posts); } }); }); 

Tuve que resolver un problema similar hace unos meses. Encontré este Gist de kottenator.

Su función de rango se modifica de este modo, siendo c la página actual m su pageCount . Las llamadas a la función se han modificado un poco y también se agrega una llamada recursiva a su función paginate(...) para volver a calcular la etiqueta después de la navegación (también, se agregó una twig a las llamadas de la función adjunta de DOM, para modificar la etiqueta de paginación , Utilicé un operador ternario. Puede ser más elegante lograrlo).
Ver este CodePen

 function range(c,m) { var current = c || 1, last = m, delta = 2, left = current - delta, right = parseInt(current) + delta + 1, range = [], rangeWithEllipsis = [], l, t; range.push(1); for (var i = c - delta ; i <= c + delta ; i++) { if (i >= left && i < right && i < m && i > 1) { range.push(i); } } range.push(m); for (var i of range) { if (l) { if (i - l === 2) { t = l+1; rangeWithEllipsis.push(t); } else if (i - l !== 1) { rangeWithEllipsis.push("..."); } } rangeWithEllipsis.push(i); l = i; } return rangeWithEllipsis; } 

No resuelve exactamente su problema por voz, pero sí pagina correctamente.
Si tengo algo de tiempo, trataré de hacer que se pagine de la manera exacta que se desea (en realidad solo se trata de personalizar el operando delta , left y right en el algoritmo, y cambiar la paginación siguiente y las llamadas del controlador de eventos de prev. De paginación).

Editar He cambiado el algoritmo para encontrar el límite left y right . Su index.html también se modifica un poco.
La idea es calcular el límite izquierdo y derecho en múltiplos de 5. Luego crea un rango de índices para mostrar y agregar una elipsis si la diferencia es demasiado grande. Esto debería resolver efectivamente su problema original.

JavaScript

 getFirstDigits = (t) => { return parseInt(t.toString().slice(0,-1)) } getLastDigit = (t) => { return parseInt(t.toString().slice(-1)) } isMultipleOf5 = (t) => { return [0,5].reduce((res,curr)=>{ return res = res || curr === getLastDigit(t); },false); } isBetween0and5 = (t) => { const _t = getLastDigit(t); return _t < 5; } isBetween5and9 = (t) => { const _t = getLastDigit(t); return _t => 5 && _t <= 9; } appendDigit = (t,d) => { return parseInt(getFirstDigits(t).toString() + d.toString()) } getSecondRightMostDigit = (t) => { return parseInt(t.toString().slice(-2,-1)) } incrementSecondDigit = (t) => { return t+10; } getLeft = (t) => { if(t>=10){ if(isBetween0and5(t)) return appendDigit(t,0); else return appendDigit(t,5); } else { if (t<5) return 0; else return 5; } } getRight = (t) => { if(t<5) return 5; else if (t<10) return 10; else if(isBetween0and5(t)) return appendDigit(t,5) else return appendDigit(incrementSecondDigit(t),0); } function range(c,m) { var current = c || 1, last = m, delta = 2, left = getLeft(c), right = getRight(c), range = [], rangeWithEllipsis = [], l, t; var rightBoundary = right < 5 ? 5 : right; for (var i = left ; i < rightBoundary ; ++i) { if( i < m && i > 0) range.push(i); } range.push(m); for (var i of range) { if (l) { if (i - l === 2) { t = l+1; rangeWithEllipsis.push(t); } else if (i - l !== 1){ rangeWithEllipsis.push("..."); } } rangeWithEllipsis.push(i); l = i; } return rangeWithEllipsis; } 

HTML / HandleBars

     Handlebars Pagination