3

Estoy haciendo un paginador de datos, pero ya me atoré. Tengo dos problemas. Quiero que salte de 10 en 10 elementos y lo hace de 20 en 20, no se por qué. Necesito ponerle un límite, o sea que no me traiga todos a partir de un índice dado, si no que me traiga apartir de dicho índice sólo 10, o lo que se marque como tamaño de la página, pero me sigue trayendo todo.

Estoy un poco confundido con array.slice dejo un ejemplo de lo que tengo hecho.

const arr = Array.from( Array( 100 ).keys() );
let currentPage = 0;


const pageSize = Number( document.getElementById('pagesize').value ) || 10;

const change = ( num ) => {
  
  currentPage += num;
  if( currentPage < 0 ) {
    currentPage = 0;
    
  } else if ( currentPage > Math.ceil( ( arr.length / pageSize ) ) ) {
    currentPage = Math.ceil( ( arr.length / pageSize ) );
    
  } else {
    currentPage += num;
  }
  
  document.getElementById('result').innerHTML = arr.slice( ( pageSize * currentPage ) );
 
};
<input id="pagesize" value="10">
<button onClick="change(-1)">Menos</button>
<button onClick="change(1)">Más</button>
<div id="result"></div>

2 respuestas 2

2

El error al usar array.slice es que estas omitiendo indicar el fin.

Solución:

En lo personal prefiero establecer mi currentPage igual al número que debería visualizar el usuario, es decir, no empezaría en 0 sino en 1

Además validaría que currentPage * pageSize no supere el largo del arreglo.

Por último quedaría calcular from y to (desde y hasta) y utilizarlos en slice.

Ejemplo:

const arr = Array.from({length: 100}, (v, i) => i + 1);
let currentPage = 1;
const pageSize = Number(document.getElementById('pagesize').value) || 10;

const change = (num) => {

  currentPage += num;
  if (currentPage < 1) {
    currentPage = 1;
  } else if ((currentPage * pageSize) > arr.length) {
    currentPage = Math.ceil(arr.length / pageSize);
  }

  let from = (currentPage - 1) * pageSize;
  let to = from + pageSize;

  document.getElementById('result').innerHTML = arr.slice(from, to);

};
<input id="pagesize" value="10">
<button onClick="change(-1)">Menos</button>
<button onClick="change(1)">Más</button>
<div id="result"></div>

1

const arr = Array.from( Array( 100 ).keys() );
let currentPage = 0;


const pageSize = Number( document.getElementById('pagesize').value ) || 10;

const change = ( num ) => {

  currentPage += num;
  if( currentPage < 0 ) {
    currentPage = 0;
  } else if ( currentPage > Math.ceil(arr.length / pageSize) ) {
    currentPage = Math.ceil(arr.length / pageSize);
  }
  
  document.getElementById('result').innerHTML = arr.slice(pageSize * currentPage);
 
};
<input id="pagesize" value="10">
<button onClick="change(-1)">Menos</button>
<button onClick="change(1)">Más</button>
<div id="result"></div>

El método .slice() es idéntico a .substring(), es decir, extrae una cadena desde el indice [start] hasta el índice [end - 1]. El parámetro [end] es opcional y si se omite extrae hasta el final.

En este caso estarías extrayendo toda tu cadena porque solo le indicas el primer valor en pocas palabras.

Ahora bien la razón de tu error es que agregas dos veces el currentPage += num en dos ocasiones, una al principio de la función y la otra en tus condiciones de if en el ultimo else, las condiciones hacen que tu variable cumpla la condición y en dos ocasiones agregue num al final de tu operación por lo cual en lugar de multiplicar pageSize* currentPage que te debería de dar como resultado 10 te da 20 en su lugar ya que currentPage al final de la operación vale 2.

De acuerdo con tus condicionales el primer if nunca se ejecutara debido a que el valor de currenPage no es menor a cero en ningún momento, currenPage tampoco es mayor a Math.ceil(arr.length/pageSize) porque esto equivale a 10 y por ultimo esta tu condición de currentPage += num en tu ultima condición la cual si se ejecuta.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.