blind-pagination v1.0.5
BlindPagination
#Instalación
npm install blind-pagination -save --legacy-peer-deps
#Importaciones
app.module.ts
import { MetroPaginationModule } from 'blind-pagination'
@NgModule({
declarations: [],
imports: [
MetroPaginationModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Nota:
Este componente no realiza paginaciones, solo contiene el template con el diseño visual basico para controlar dicha paginación.
Este componente está diseñado para trabajar con los assets de Metro-Core, para utilizarlo en otro proyecto, tendrán que editarlo de acuerdo a los requerimientos del proyecto y su template.
Parametros
LLamada y parametros requeridos
|
Llamada Basica
|
<metro-pagination
[totalRecords]="200"
[current]="current"
(onPageSelected)="current = $event"
(onLimitSelected)="change_api_limit($event)"
></metro-pagination>
| |
Parametros requeridos
|
totalRecords number
|
Nota:
La cantidad de paginas se calculará automaticamente dependiendo de la cantidad total de registros que contenga la tabla. Por defecto, la cantidad e registros a mostrar será de 10, es decir que para 200 registros, se calcularán 20 paginas.
Por defecto se mostrarán 5 paginas en el selector de paginas, pero podrá modificar este numero agregando parametros adicionales
Parametros opcionales
|
Nombre
|
Type
|
Default
|
Descripcipón
| |
current
|
number\ |
1
|
Pagina actual
| |
loading
|
BOOLEAN\ |
false\ |
Dependiendo del estado enviado, se mostrará u oculpará el spinner de carga
| |
maxShowPages
|
BOOLEAN\ |
5
|
Cantidad maxima de páginas a mostrar en el selector de páginas
| |
buttonText
|
class\ |\ |
Recibe textos que se asignarán a los botones de navegación
| |
showButtonsOnSides
|
BOOLEAN\ |
false\ |
Mueve los botones de navegacion hacia los lados
| |
showPageSelector
|
BOOLEAN\ |
true\ |
Muestra u oculta los botones de seleccion de pagina
| |
showPageLimits
|
BOOLEAN\ |
true\ |
Habilita o deshabilita el selector de limites predefinidos
| |
showRightOptions
|
BOOLEAN\ |
true\ |
Habilita o deshabilita el bloque derecho de opciones.
|
Nota:
Si showRightOptions se setea en false, el selector de paginas se alineará al centro.
showButtonsOnSides debe estar seteado en false para que showButtonsOnSides active su funcionalidad
Callbacks
|
onPageSelected
|
number\ |
Retornará en $event la pagina seleccionada
| |
onLimitSelected
|
number\ |
Retornará en $event el valor 1, 10, 25, 50 o 100 dependiendo de la opción seleccionado para la cantidad de filas.
|
onPageSelected
<metro-pagination
[totalRecords]="127"
[current]="current"
(onPageSelected)="current = $event"
></metro-pagination>
onLimitSelected
<metro-pagination
[totalRecords]="127"
[current]="current"
(onLimitSelected)="change_api_limit($event)"
></metro-pagination>
Nota:
onLimitSelected retornará 1 si se selecciona la opcion All records
Configuración de texto, idioma o WCGA
Este parámetro es de tipo wcga_text, podrán recibirse textos para alterar los valores de title y aria-label de los botones de navegación y selectores de pagina
export class wcag_text{
goFirstButton:string = "Go to first page";
subOneButton:string = "Previous page";
addOneButton:string = "Next page";
goLastButton:string = "Go to last page";
selectPage:string = "Select page ";
constructor( params?: Partial<wcag_text> ){
Object.assign(this, params);
}
}
Debe enviarse un objeto para poder cambiar los textos de forma correcta.
/ENJOY ¯_(ツ)_/¯