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 ¯_(ツ)_/¯