Como usar DataTables en Blazor

DataTables es una extensión que podemos usar junto con jQuery para incorporar funciones adicionales como paginación, barra de búsqueda y ordenamiento de columnas a tablas de html.

Para utilizar DataTables en blazor como en cualquier proyecto web debemos agregar el script de js y el css al proyecto primero.

En el archivo index.html debemos agregar en el head los estilo CSS y luego el Javascript al final

<link href="css/datatable/jquery.dataTables.min.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />

<script src="scripts/datatable/js/jquery.dataTables.js"></script>

Luego debemos construir una función para inicializar las tablas, en este caso creé un método genérico que recibirá el nombre de la tabla, es muy importante utilizar window para exponer el método y luego poder invocarlo desde Blazor puede agregar este script directamente en el HTML (index.html) o crear un archivo JS aparte para como datatableInitializer.js y agregarlo luego al index.html

window.initializeDataTable = function initializeDataTable(table) {
    $(document).ready(function () {
        $(table).DataTable();
    });
}

Luego vamos al archivo .razor que contiene la tabla que vamos a usar y en el encabezado agregamos la interfaz para inyectar el Javascript

@page "/mycomponent"
@inject HttpClient Http
@inject IJSRuntime JSRuntime;

Para finalizar nuestra tabla debe tener un Id <table id=”adminTable“ y este seria el que usaríamos al momento de invocar nuestra función, importante que esta función debe ser invocada en el método OnInitializedAsync de nuestro componente

protected override async Task OnInitializedAsync()
{
   await JSRuntime.InvokeAsync<object>("initializeDataTable", "#adminTable");
    
}