De acuerdo, tengo este rango de números generados a partir de una API (alrededor de 600 en total).
Puedo incluirlos en un elemento html con php. del siguiente código, una vez generado, llevará casi una eternidad cargar todos los números y mi diseño se verá desordenado al final del día.
<?php for ($i=1; $i < $post['number_of_slots']; $i++) { ?> <button"><span><?php echo $i; ?></span></button> <?php } ?> Then pagination should look like this < 1, 2, 3, 4, 5, 6, 7>Así que quiero crear una navegación similar a la paginación que dividirá los números en paginación, para mostrar como 100 números por página. Si se puede lograr a través de js o Jquery para evitar que la página se vuelva a cargar al presionar el botón de números de página.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="btnContainer"> </div> <div id="dataContainer"> </div> <script> Object.defineProperty(Array.prototype, 'chunk', { value: function(chunkSize) { var r = []; for (var i = 0; i < this.length; i += chunkSize) r.push(this.slice(i, i + chunkSize)); return r; } }); $(document).ready(function(){ document.getElementById("btnContainer").addEventListener("click", getData); var masterData; var numberOfSlots; $.get("apiendpoint", function(data, status){ masterData = data; console.log(masterData); numberOfSlots = masterData['data'].contest.number_of_slots; var arr = Array.from(Array(+numberOfSlots).keys()); const noOfSlotsInChunk = arr.chunk(100); createButtons(noOfSlotsInChunk); }); }); function getData(e){ const pageFrom = e.target.dataset.pagefrom; const pageTo = e.target.dataset.pageto; console.log(pageFrom, pageTo); } function createButtons(chunk){ const fragment = document.createDocumentFragment(); for(let i=0; i<chunk.length;i++){ const btn = document.createElement("BUTTON"); const initalNum = chunk[i][0]+1; const lastNum = (chunk[i][chunk[i].length-1])+1; btn.textContent = initalNum + '-' + lastNum; btn.setAttribute("data-pagefrom", initalNum); btn.setAttribute("data-pageto", lastNum); fragment.appendChild(btn); } document.getElementById("btnContainer").appendChild(fragment); } </script> </body> </html>