Estoy creando una paginación donde quiero mostrar '...' en ciertos puntos. La cantidad de páginas depende de la selección del usuario; hay 650 publicaciones y los usuarios pueden elegir mostrar 15, 25, 50 o 100 elementos a la vez. De todos modos, digamos que hay 45 páginas. Si estoy en la página uno, quiero que se vea así:

1 2 3 ... 45

si estoy en la página 3, quiero que se vea así:

1 ... 2 3 4 ... 45

si estoy en la página 44 (o 45), quiero que se vea así:

1... 43 44 45

Estoy haciendo todo esto con JS, no estoy usando ningún paquete de paginación adicional de React. Actualmente, tengo algunas funciones, pero me estoy quedando perplejo sobre cómo ajustar mi bucle for.

Entonces, en este momento, si estoy en la página 1, se ve así:

1 2 ... 43 44 45

Si estoy en la página 3:

1 2 3 4 ... 43 44 45

Si estoy en la página 4:

1... 3 4 5 ... 43 44 45

**Si estoy en la página 45:

1 ... 44 45

Busqué durante mucho tiempo y finalmente encontré un hilo de stackoverflow que me ayudó. Implementé el bucle while básico proporcionado por derpirscher.

 let pagination = [], i = 1; while (i <= totalPageCount) { if (i <= 1 || i >= totalPageCount - 2|| i >= currentPage - 1 && i <= currentPage + 1) { pagination.push(i); i++; } else { pagination.push('...'); //jump to the next page to be linked in the navigation i = i < currentPage ? currentPage - 1 : totalPageCount - 2; } }

En este ejemplo, totalPageCount es cuántas páginas hay en total y currentPage es la página en la que se encuentra el usuario actualmente. Traté de incorporar alguna lógica de hermanos donde, por ejemplo, si el índice de hermanos izquierdo era mayor que dos, inserté puntos. Eso resultó en que hubiera puntos en el lado izquierdo de casi todos los números de página, y definitivamente no quería eso.

Si es importante, mapeo a través de la pagination directamente en mi función de representación para generar la plantilla.

 {pagination.map((pageNumber) => { return ( <li key={pageNumber}> <button onClick={() => onPageChange(pageNumber)} > {pageNumber} </button> </li> ) })}

Cualquier pensamiento o recurso útil sobre esto sería apreciado. ¡Sé que mi JS podría ser mejor, y en parte es por eso que estoy tratando de practicar hacerlo de esta manera!