Estoy tratando de crear una función que me devuelva elementos de paginación, y esto es lo que probé (basado en https://github.com/mui/material-ui/blob/v4.10.2/packages/material-ui-lab /src/Paginación/usePaginación.js ):
const pagination = (totalPages, siblingCount = 2, pageNumber) => { const ELLIPSIS = '…'; const siblingsStart = Math.max( Math.min( // Natural start pageNumber - siblingCount, // Lower boundary when page is high totalPages - siblingCount * 2 - 2, ), // Greater than startPage 3, ); const siblingsEnd = Math.min( Math.max( // Natural end pageNumber + siblingCount, // Upper boundary when page is low siblingCount * 2 + 3, ), // Less than endPages totalPages - 2, ); // Basic list of items to render return [ 1, // Start ellipsis // eslint-disable-next-line no-nested-ternary ...(siblingsStart > 3 ? [ELLIPSIS] : totalPages - 1 > 2 ? [2] : []), // Sibling pages ...range(siblingsStart, siblingsEnd), // End ellipsis // eslint-disable-next-line no-nested-ternary ...(siblingsEnd < totalPages - 2 ? [ELLIPSIS] : totalPages - 1 > 1 ? [totalPages - 1] : []), totalPages, ]; }; Esta función devolverá una cadena como la siguiente cuando (por ejemplo) pageNumber = 6 y totalPages = 20 :
1 … 4 5 6 7 8 … 20
Esto funciona bien, ya que quiero mostrar siempre dos números antes y después de pageNumber .
Entonces, cuando pageNumber = 1 , quiero lo siguiente:
1 2 3 … 20
Pero en cambio me sale esto:
1 2 3 4 5 6 7 … 20
Lo mismo que cuando pageNumber = 20 , quiero obtener esto:
1 … 18 19 20
Como puedo resolver esto ?
Hay páginas hermanas más bajas y más altas codificadas de forma rígida en el código proporcionado en la pregunta. Por ejemplo, el código que determina el valor siblingsStart , que se utiliza para comenzar las páginas hermanas (lista de páginas en la parte central) nunca será inferior a tres:
const siblingsStart = Math.max( ... , 3); // <-- lowest value returnable is 3 Entonces, cualquier valor de página actual menor que 6, dado un valor de 2 hermanos antes de la página actual, devolverá 1 2 3 4 5 6 ... porque la lista de páginas siempre comienza con 1 , siblingCount es 2 y 3 es difícil -codificado como el número de página hermano más bajo: 1 + 2 + 3 = 6 .
Comenzando con una pizarra en blanco ... primero verifique si la página actual está cerca de la primera página y, si no, agregue la primera página más puntos suspensivos a una cadena. A continuación , comience a hacer un bucle antes de la página actual y haga un bucle con el número de páginas hermanas, asegurándose de no ir antes de la primera página, agregando cada una a la cadena. Después de eso , comience en la página actual y haga un bucle con el conteo de hermanos hacia adelante, asegurándose de no ir más allá del total de páginas. Y finalmente agregue la última página si no está demasiado cerca de la página actual.
const pagination = (pageNumber, totalPages = 40, siblingCount = 2) => { let pagination_str = ""; // add first page if current page is not too close if ( 1 < pageNumber - siblingCount ) { pagination_str += "1 "; if ( siblingCount + 3 < pageNumber ) { pagination_str += "… "; } else if ( siblingCount + 2 < pageNumber ) { pagination_str += "2 "; } } // get siblingCount before for ( // is current page to close to first page? let ii = (0 < (pageNumber - siblingCount)? pageNumber - siblingCount: 1); ii < (pageNumber); ii++ ) { pagination_str += ii + " "; } // get siblingCount after for ( let ii = pageNumber; // is end of increment greater than or equal to the total number of pages? ii <= ((totalPages >= pageNumber + siblingCount)? (pageNumber + siblingCount): totalPages); ii++ ) { pagination_str += ii + " "; } // add last page if current page is not too close if ( totalPages > pageNumber + siblingCount ) { if ( totalPages - siblingCount - 2 > pageNumber ) { pagination_str += "… "; } else if ( totalPages - siblingCount - 1 > pageNumber ) { pagination_str += (totalPages - 1) + " "; } pagination_str += totalPages; } return pagination_str; } console.log("page 1 of 7: ", pagination(1, 7)); console.log("page 5 of 7: ", pagination(5, 7)); console.log("page 6 of 7: ", pagination(6, 7)); console.log("page 5: ", pagination(5, 20)); console.log("page 6: ", pagination(6, 20)); console.log("page 20: ", pagination(20, 20));