Ahoramos vamos a realizar todas las funciones de las librería solo con código en C#.
Realizaremos el ordenamiento por columna donde se visualizara un icono dependiendo el orden en que se encuentre la columna.
Crearemos una carpeta llama Empleados y en ella el archivo Index.razor.
Ordenamiento de columnas
Llamaremos el Models y los servicicos de la Interface, también tendremos un pequeño código en css que mostrara el icono cuando se seleccione la columna a ordenar.
En el apartado donde se mostraran los titulo llamamos los método SortTable (para ordenar la columna) y SetSortIcon (para mostrar el iconos) los cuales tenemos declarados en la parte inferior del código.
Cuando llamemos los datos de la tabla solo validaremos la información de los campos fecha.
Crearemos el método para ordenar la columna.
Tambien el método que mostrara los iconos dependiendo el ordenamiento de las columnas.
En el archivo _Host.cshtml declaramos el enlace para poder utilizar los iconos de Bootstrap.
En el archivo NavMenu.razor llamamos la carpeta empleados que por default llamara el archivo Index.razor.
Ejecutamos la aplicación, al presionar sobre alguna de las columnas, se visualizar el icono y se ordenara la columna.
Filtrar información
Para realizar el filtro o busqueda de información creamos un el archivo FiltroTable.razor en la carpeta Shared, al crearlo en la carpeta Shared lo podremos utilizar en alguna otra tabla sin necesidada de volver a teclear todo el código.
Declaramos BuscarTexto.
Lo llamaremos en Pages/ Empleados/ Index.razor haciendo referencia al archivo FiltroTable.razor, crearemos el método EmpleadoBuscarTexto que estará declarado en el archivo Pages/ Empleados/ Index.razor.
En el médoto EmpleadoBuscarTexto realizamos la comparación con todos los campos de la tabla y mostramos las coincidncias.
Ejecutamos la aplicación y probemos el filtro.
Paginación
Para realizar la páginación crearemos el archivo PaginacionTable.razor en la carpeta Shared, al crearlo en la carpeta Shared lo podremos utilizar en alguna otra tabla sin necesidada de volver a teclear todo el código.
Vamos a crear un formato de tabla donde llamaremos los título y llenaremos el contenido de la tabla,
En el archivo Pages/ Empleados/ Index.razor llamaremos la referencia al archivo PaginacionTable.razor, crearemos los titulos de las columnas así como el contenido de cada una de ellas.
En el archivo PaginacionTable.razor también tendremos la información que indica la cantidad de registros y el nímero de páginas mostradas.
También se mostrara la páginación.
En la parte de código indicaremos la cantidad de registros a visualizar por página.
Tendremos los método donde se actualizara la lista de la paginación cada vez que se seleccione un apuntador de página.
Por último tendremos los métodos donde indicamos la cantidad de apuntadores que se mostraran en la paginación así como los botones de navegación.
Ejecutamos la aplicación y revísemos el resultado.
Puedes descargar el código de la Parte 3 de mi repositorio en GitHub.
.jpg)
0 Comentarios