Del curso: Blazor: desarrollo de apps esencial

Implementación de paginación inicial en el grid - Tutorial de Blazor

Del curso: Blazor: desarrollo de apps esencial

Implementación de paginación inicial en el grid

Si ejecutamos una vez más la aplicación, veremos que el grid está funcionando sin lugar a dudas, pero tengo estos 100 registros en la misma página. Probablemente no sea la mejor idea, ya que son bastantes que me obligan a hacer scroll. Además, encontrar datos resulta un tanto difícil después de cierto número de registros. Por lo tanto, en este vídeo lo que vamos a hacer es implementar paginación en nuestro grid. Para esto necesitamos crear la instancia de un objeto de tipo Pagination State. Esto lo vamos a hacer obviamente aquí en el bloque de código. Entonces el tipo es pagination state y le vamos a poner un nombre, digamos pagination. Vamos a hacer la instancia y aquí me va a pedir que indique cuál es este número de elementos por página. Esto a través de items per page. Vamos a decirle diez de forma predeterminada. Vamos a dejarlo así. Y acá en este Quick Grid, lo que voy a hacer es cambiar su propiedad llamada pagination. Entonces vamos a ponerlo por acá pagination y aquí ya adivinaste @ paginación, ya que recuerda que ese es un objeto que acabamos de escribir con C#. Muy bien, vamos a ver cómo funciona esto. Aquí inició la depuración. Aquí tenemos la aplicación corriendo, navegamos a Pets y vemos que efectivamente tenemos estos diez registros. Pero hace falta algo más. Estarás de acuerdo que necesito algún tipo de control para justamente indicar qué página es a la que quiero navegar. Entonces vamos a hacer lo siguiente. Después de Quick Grid, vamos a hacer la instancia de este componente llamado Paginator y además aquí necesitamos indicar cuál es su objeto que está controlando al estado. Nuevamente @ pagination. Muy bien, entonces parece ser que esto va a servir. Vamos a iniciar una vez más la depuración. Navegamos a Pets y tenemos el control pagination que me permite cambiarme entre todas estas diferentes páginas. Muy bien, acompáñame al siguiente vídeo donde vamos a incorporar un nuevo elemento visual para que los usuarios decidan cuántos elementos por página desean ver. No solamente diez, ya que es el número que pusimos de forma fija, sino que los usuarios decidan.

Contenido