Estoy construyendo una calculadora de paginación automática que calcula el desplazamiento y el rango de acuerdo con la entrada del usuario. Una tarea muy simple, pero mi algoritmo está desactivado debido a que el desplazamiento comienza en 0 en el ciclo for. No importa cómo lo pongas, comenzando en 0 o 1, los números siempre estarán apagados. ¿Cómo puedo hacer que esto funcione?
Por ejemplo, ingresar 100 artículos en total y 25 por página tiene un error de 4:
page : 1 | offset : 0 | range : 1 - 25 | total : 24 page : 2 | offset : 25 | range : 26 - 50 | total : 24 page : 3 | offset : 50 | range : 51 - 75 | total : 24 page : 4 | offset : 75 | range : 76 - 100 | total : 24 //event listener var button = document.getElementById('submit'); //click button.addEventListener('click',function(){ //div results var results = document.getElementById('results'); //clear div before appending results.innerHTML= ''; //grab value var total_items = document.getElementById('total_items').value;//331165139 var per_page = document.getElementById('items_per_page').value; //total pages var total_pages = Math.ceil(total_items/per_page); //iterate over pages for(var x = 0; x<total_pages; x++){ //get page var page = x+1; //offset var offset = (per_page * page) - per_page; //range from var from = ((page - 1) * per_page) + 1 ; //range to var to = per_page * page var range = from + ' - ' + to; //creating divs var newDiv = document.createElement('div'); newDiv.innerHTML = 'page : ' + page + ' | offset : ' + offset + ' | range : ' + range + ' | total : ' + (to-from); results.appendChild(newDiv); } }) <h3>Pagination Calculator</h3> <hr> <p>Calculates pagination automatically in the console</p> <p>*Pop open the console</p> <hr> <label>total items </label> <input id="total_items"> <label>limit per page</label> <input id="items_per_page"> <button id="submit">Submit</button> <hr> <div id="results"></div>La respuesta más simple a lo que está mal con su código es que tiene un error de uno. Estos son muy comunes.
Cuando desea contar los números enteros entre a y b , inclusive, el conteo no es b - a . Es b - a + 1 . Es fácil de ver con un ejemplo. Si quieres contar los números entre 5 y 8 , tenemos 5 , 6 , 7 y 8 , para un total de 4 números. Pero 8 - 5 es 3 . Necesitamos agregar uno para tener en cuenta el segundo punto final incluido.
Pero yo vería los problemas de manera un poco diferente.
Sin tratar de replicar su interfaz de usuario, podría escribir una función como esta:
const paginate = (items, per) => Array .from ({length: Math .ceil (items / per)}, (_, i) => ({ page: i + 1, offset: i * per, range: [i * per + 1, Math .min ((i + 1) * per, items)], total: Math .min ((i + 1) * per, items) - (i * per) })) console .log (paginate (99, 8)) .as-console-wrapper {max-height: 100% !important; top: 0}Esto obtiene todas las páginas a la vez. Una alternativa sería crear dinámicamente el rango de páginas cuando se solicite, utilizando un número de página. (Alternativamente, podría hacerse con una compensación; hay pros y contras para cada uno).
Eso podría verse así:
const nextPage = ( items = [], per = 10, page = 1, top = Math .min ((page + 1) * per, items) ) => ({ page, range: [page * per + 1, top], total: Math .max (0, top - (page * per)), done: top >= items }) console .log (nextPage (99, 8, 1)) // `done` is false console .log (nextPage (99, 8, 2)) // ... console .log (nextPage (99, 8, 3)) // ... console .log ('....') // `done` stays false console .log (nextPage (99, 8, 11)) // ... console .log (nextPage (99, 8, 12)) // `done` is now true .as-console-wrapper {max-height: 100% !important; top: 0}Además, tenga en cuenta el comentario que decía
¡Amigo mío, date cuenta de que
inputElement.valuedevuelve una cadena!
Esto no te perjudicó porque la única aritmética que hiciste con los valores de entrada fue multiplicarlos o restarlos. Si hubiera tratado de agregar, podría haber obtenido algunas respuestas sorprendentes debido a la concatenación de cadenas.