Jquery Datatable (Cómo funciona para desarrolladores)

La presentación de datos es un aspecto fundamental del desarrollo web y, cuando se trata de datos tabulares, es esencial disponer de una tabla interactiva y rica en funciones. jQuery DataTables es una potente biblioteca JavaScript que proporciona funciones avanzadas para crear tablas dinámicas y adaptables. En este artículo, vamos a explorar cómo integrar y utilizar jQuery DataTables en un ASP.NET aplicación web para mejorar la presentación de datos tabulares.

¿Cómo utilizar jQuery DataTables en una aplicación web ASP.NET?

1. Crear o abrir una aplicación web.
2. Instale los paquetes de Entity Framework.
3. Añadir Modelo, Contexto BD y Controlador.
4. Añada la cadena de conexión a la base de datos y establezca la configuración.
5. Añadir Migración y Actualizar Base de Datos.
6. Añadir biblioteca del lado del cliente de jQuery DataTables.
7. Añadir tabla HTML y código JavaScript.
8. Cree y ejecute la aplicación.
9. Exportación de datos a Excel mediante IronXL.

¿Qué es jQuery DataTables?

jQuery DataTables es un plugin jQuery ligero, flexible y rico en funciones para manejar datos tabulares. Ofrece una amplia gama de funcionalidades, como ordenación, búsqueda, paginación, etc., lo que la convierte en la opción ideal para presentar grandes conjuntos de datos de forma sencilla.

Procesamiento en el lado del cliente

En el procesamiento del lado del cliente, el navegador está facultado para manejar el conjunto de datos localmente. jQuery DataTables, a través de sus potentes características, permite la interacción dinámica y la manipulación de los datos directamente dentro del navegador del usuario. Aunque este enfoque funciona a la perfección con conjuntos de datos pequeños, puede plantear problemas cuando se manejan conjuntos de datos extensos debido a posibles cuellos de botella en el rendimiento y a un mayor consumo de recursos.

En este artículo, exploraremos el procesamiento del lado del cliente en una aplicación ASP.NET Razor Page, destacando las ventajas que ofrece para conjuntos de datos más pequeños y proporcionando información sobre posibles consideraciones y optimizaciones para garantizar una experiencia de usuario fluida y receptiva.

Primeros pasos con jQuery DataTables en una aplicación web ASP.NET

En este artículo se utilizará una Aplicación Web ASP.NET Razor Page orientada a .NET Framework 4.8. Usted puede utilizar Blazor, MVC, o Web Forms, según su requisito.

En este artículo se utilizará el enfoque "Code-First". Puede utilizar el enfoque de la base de datos como prefiera. Necesitamos instalar los siguientes paquetes para utilizar el enfoque de Code First.

1. Microsoft.EntityFrameworkCore
2. Microsoft.EntityFrameworkCore.Design
3. Microsoft.EntityFrameworkCore.SqlServer

4. Microsoft.EntityFrameworkCore.Tools

   Instale los paquetes anteriores mediante el comando Install-Package de la consola del gestor de paquetes NuGet o instálelos desde la solución del gestor de paquetes NuGet buscándolos.

   Vamos a configurar nuestro proyecto añadiendo la clase Model, la clase ApplicationDBContext, el controlador, la cadena de conexión y la configuración de servicios en el archivo Program.cs.

Añadir clase de modelo

Estoy utilizando la clase modelo Employee para este ejemplo, puede utilizarla según sus necesidades.

public class Employee
{
    public int Id { get; set; }
    public string FirstName { get; set; } = string.Empty;
    public string LastName { get; set; } = string.Empty;
    public string Email { get; set; } = string.Empty;
    public string PhoneNumber { get; set; } = string.Empty;
    public string Gender { get; set; } = string.Empty;
    public string Designation { get; set; } = string.Empty;
}

public class Employee
{
    public int Id { get; set; }
    public string FirstName { get; set; } = string.Empty;
    public string LastName { get; set; } = string.Empty;
    public string Email { get; set; } = string.Empty;
    public string PhoneNumber { get; set; } = string.Empty;
    public string Gender { get; set; } = string.Empty;
    public string Designation { get; set; } = string.Empty;
}

Public Class Employee
	Public Property Id() As Integer
	Public Property FirstName() As String = String.Empty
	Public Property LastName() As String = String.Empty
	Public Property Email() As String = String.Empty
	Public Property PhoneNumber() As String = String.Empty
	Public Property Gender() As String = String.Empty
	Public Property Designation() As String = String.Empty
End Class

Añadir clase ApplicationDbContext

Necesitamos añadir la clase ApplicationDbContext para configurar Entity Framework.

public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
    {
    }

    public DbSet<Employee> Employees { get; set; }
}

public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
    {
    }

    public DbSet<Employee> Employees { get; set; }
}

Public Class ApplicationDbContext
	Inherits DbContext

	Public Sub New(ByVal options As DbContextOptions(Of ApplicationDbContext))
		MyBase.New(options)
	End Sub

	Public Property Employees() As DbSet(Of Employee)
End Class

Añadir controlador de empleados

Añade el EmployeeController para crear el endpoint.

[Route("api/[controller]")]
[ApiController]
public class EmployeeController : ControllerBase
{
    private readonly ApplicationDbContext _context;

    public EmployeeController(ApplicationDbContext context)
    {
        _context = context;
    }

    [HttpGet]
    public IActionResult GetEmployees()
    {
        try
        {
            var employeeData = _context.Employees.ToList();
            var jsonData = new { data = employeeData };
            return Ok(jsonData);
        }
        catch (Exception ex)
        {
            throw;
        }
    }
}

[Route("api/[controller]")]
[ApiController]
public class EmployeeController : ControllerBase
{
    private readonly ApplicationDbContext _context;

    public EmployeeController(ApplicationDbContext context)
    {
        _context = context;
    }

    [HttpGet]
    public IActionResult GetEmployees()
    {
        try
        {
            var employeeData = _context.Employees.ToList();
            var jsonData = new { data = employeeData };
            return Ok(jsonData);
        }
        catch (Exception ex)
        {
            throw;
        }
    }
}

<Route("api/[controller]")>
<ApiController>
Public Class EmployeeController
	Inherits ControllerBase

	Private ReadOnly _context As ApplicationDbContext

	Public Sub New(ByVal context As ApplicationDbContext)
		_context = context
	End Sub

	<HttpGet>
	Public Function GetEmployees() As IActionResult
		Try
			Dim employeeData = _context.Employees.ToList()
			Dim jsonData = New With {Key .data = employeeData}
			Return Ok(jsonData)
		Catch ex As Exception
			Throw
		End Try
	End Function
End Class

Aquí, estamos usando el método HttpGet ya que estaremos recuperando los datos completos del servidor en el lado del cliente e implementando la paginación, búsqueda y ordenamiento en el lado del cliente. Estamos devolviendo un array JSON que será renderizado en el lado del cliente.

Añadir cadena de conexión

Añade la siguiente cadena de conexión en el archivo appsettings.json.

"ConnectionStrings": {
  "EmployeeDB": "Server=localserver\\SQLEXPRESS;Database=EmployeeDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}

Añade la siguiente línea en la clase Program.cs bajo webApplication.CreateBuilder() para conectar con SQL Server.

builder.Services.AddDbContext<ApplicationDbContext>(options =>
{
    options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"));
});

builder.Services.AddDbContext<ApplicationDbContext>(options =>
{
    options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"));
});

builder.Services.AddDbContext(Of ApplicationDbContext)(Sub(options)
	options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"))
End Sub)

Ejecutar la migración

El siguiente paso es ejecutar la migración, ya que estamos utilizando el enfoque de Code First. Ejecute el siguiente comando en la consola del gestor de paquetes.

Add-Migration init

Este comando creará una migración. Ahora, ejecute el siguiente comando para aplicar esta migración a la base de datos.

update-database

Ahora que nuestro proyecto está configurado y la base de datos está lista, sólo tenemos que añadir la librería jQuery y las tablas HTML para que nuestra interfaz de usuario esté lista. En este ejemplo hemos utilizado SQL Server como fuente de datos, pero puede utilizar cualquier otra base de datos.

Añadir biblioteca jQuery DataTables

Necesitamos añadir la librería jQuery DataTables, que es un plugin de mejora de tablas para la librería jQuery JavaScript, en nuestro proyecto. Podemos añadirla haciendo clic con el botón derecho en el proyecto, seleccionando "Añadir" y, a continuación, "Añadir biblioteca del lado del cliente". Aparecerá una pequeña ventana, donde podemos buscar "jquery datatables" e instalarlo, como se muestra a continuación:

Añadir tabla HTML

Vamos a añadir una tabla HTML con un cuerpo de tabla vacío. Añadiremos los encabezados de columna necesarios mientras configuramos la jQuery DataTable. Añada el siguiente código al archivo Index.cshtml.

@page
@model IndexModel
@{
    ViewData ["Title"] = "Home page";
}
<link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<div class="container">
    <br />
    <div style="width:90%; margin:0 auto;">
        <table id="employeeDatatable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
        </table>
    </div>
</div>
@section Scripts
{
    <script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
    <script src="~/lib/datatables/js/dataTables.bootstrap4.min.js"></script>
    <script src="~/js/EmployeeDatatable.js"></script>
}

Necesitamos añadir el fichero EmployeeDatatable.js dentro de la carpeta wwwroot/Js. En este archivo, tendremos una llamada Ajax y características avanzadas del jQuery DataTable como filtrado, paginación, búsqueda, ordenación, etc.

Crear archivo EmployeeDatatable.js

Crea un archivo EmployeeDatatable.js dentro de la carpeta wwwroot/Js. Añade el siguiente código.

$(document).ready(function () {
    $("#employeeDatatable").DataTable({
        "processing": true,
        "serverSide": false,
        "filter": true,
        "ajax": {
            "url": "/api/Employee",
            "type": "GET",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],
        "columns": [
            { "data": "id", "title": "Employee ID", "name": "Employee ID", "autoWidth": true },
            { "data": "firstName", "title": "First Name", "name": "First Name", "autoWidth": true },
            { "data": "lastName", "title": "Last Name", "name": "Last Name", "autoWidth": true },
            { "data": "email", "title": "Email", "name": "Email", "autoWidth": true },
            { "data": "phoneNumber", "title": "Phone Number", "name": "Phone Number", "autoWidth": true },
            { "data": "gender", "title": "Gender", "name": "Gender", "autoWidth": true },
            { "data": "designation", "title": "Designation", "name": "Designation", "autoWidth": true }
        ]
    });
});

$(document).ready(function () {
    $("#employeeDatatable").DataTable({
        "processing": true,
        "serverSide": false,
        "filter": true,
        "ajax": {
            "url": "/api/Employee",
            "type": "GET",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],
        "columns": [
            { "data": "id", "title": "Employee ID", "name": "Employee ID", "autoWidth": true },
            { "data": "firstName", "title": "First Name", "name": "First Name", "autoWidth": true },
            { "data": "lastName", "title": "Last Name", "name": "Last Name", "autoWidth": true },
            { "data": "email", "title": "Email", "name": "Email", "autoWidth": true },
            { "data": "phoneNumber", "title": "Phone Number", "name": "Phone Number", "autoWidth": true },
            { "data": "gender", "title": "Gender", "name": "Gender", "autoWidth": true },
            { "data": "designation", "title": "Designation", "name": "Designation", "autoWidth": true }
        ]
    });
});

Hemos utilizado la biblioteca jQuery DataTables, que cuenta con numerosas funciones. Este potente plugin de jQuery nos permite implementar funciones avanzadas en el lado del cliente con el mínimo esfuerzo.

Ahora, construye y ejecuta esta aplicación.

Salida

Podemos ver que tenemos una UI muy interactiva lista con la ayuda de jQuery en ASP.NET. Los datos mostrados son los siguientes:

Ahora, la paginación se implementa en el lado del cliente, por lo tanto los datos completos se envían desde el servidor como se muestra a continuación:

Salida IU

Podemos buscar, ordenar y cambiar la página, todo se realizará en el lado del cliente como se muestra a continuación:

Introducción a IronXL

IronXL es una biblioteca que permite trabajar con archivos Excel en aplicaciones .NET. Puede crear, leer, editar y guardar documentos Excel en varios formatos como XLS, XLSX, CSV y TSV. No requiere tener instalado Microsoft Office ni Excel Interop. Es compatible con .NET 5, Core, Framework y Azure.

A menudo tenemos la necesidad de exportar datos a archivos Excel o CSV. IronXL es la mejor opción en este caso. Ahora, escribiremos código para exportar nuestros datos a un archivo Excel.

Instalar IronXL

Instala la librería IronXL en tu proyecto introduciendo el siguiente comando en la consola del gestor de paquetes.

Install-Package IronXL.Excel

Esto instalará IronXL y las dependencias necesarias en nuestro proyecto. También puede descargarlo directamente de este enlace de descarga.

Exportar datos a Excel

Escribamos código para convertir nuestra Lista de Empleados en un archivo Excel.

public void ExportToExcel(List<Employee> employeeList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    WorkSheet ws = wb.DefaultWorkSheet;

    //  Añadir fila de cabecera
    ws ["A1"].Value = "Employee ID";
    ws ["B1"].Value = "First Name";
    ws ["C1"].Value = "Last Name";
    ws ["D1"].Value = "Designation";
    ws ["E1"].Value = "Gender";
    ws ["F1"].Value = "Phone Number";
    ws ["G1"].Value = "Email";

    int rowCount = 2;

    //  Añadir datos
    foreach (Employee employee in employeeList)
    {
        ws ["A" + rowCount].Value = employee.Id.ToString();
        ws ["B" + rowCount].Value = employee.FirstName;
        ws ["C" + rowCount].Value = employee.LastName;
        ws ["D" + rowCount].Value = employee.Designation;
        ws ["E" + rowCount].Value = employee.Gender;
        ws ["F" + rowCount].Value = employee.PhoneNumber;
        ws ["G" + rowCount].Value = employee.Email;

        rowCount++;
    }

    wb.SaveAs("Employee.xlsx");
}

public void ExportToExcel(List<Employee> employeeList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    WorkSheet ws = wb.DefaultWorkSheet;

    //  Añadir fila de cabecera
    ws ["A1"].Value = "Employee ID";
    ws ["B1"].Value = "First Name";
    ws ["C1"].Value = "Last Name";
    ws ["D1"].Value = "Designation";
    ws ["E1"].Value = "Gender";
    ws ["F1"].Value = "Phone Number";
    ws ["G1"].Value = "Email";

    int rowCount = 2;

    //  Añadir datos
    foreach (Employee employee in employeeList)
    {
        ws ["A" + rowCount].Value = employee.Id.ToString();
        ws ["B" + rowCount].Value = employee.FirstName;
        ws ["C" + rowCount].Value = employee.LastName;
        ws ["D" + rowCount].Value = employee.Designation;
        ws ["E" + rowCount].Value = employee.Gender;
        ws ["F" + rowCount].Value = employee.PhoneNumber;
        ws ["G" + rowCount].Value = employee.Email;

        rowCount++;
    }

    wb.SaveAs("Employee.xlsx");
}

Public Sub ExportToExcel(ByVal employeeList As List(Of Employee))
	Dim wb As WorkBook = WorkBook.Create(ExcelFileFormat.XLSX)
	Dim ws As WorkSheet = wb.DefaultWorkSheet

	'  Añadir fila de cabecera
	ws ("A1").Value = "Employee ID"
	ws ("B1").Value = "First Name"
	ws ("C1").Value = "Last Name"
	ws ("D1").Value = "Designation"
	ws ("E1").Value = "Gender"
	ws ("F1").Value = "Phone Number"
	ws ("G1").Value = "Email"

	Dim rowCount As Integer = 2

	'  Añadir datos
	For Each employee As Employee In employeeList
		ws ("A" & rowCount).Value = employee.Id.ToString()
		ws ("B" & rowCount).Value = employee.FirstName
		ws ("C" & rowCount).Value = employee.LastName
		ws ("D" & rowCount).Value = employee.Designation
		ws ("E" & rowCount).Value = employee.Gender
		ws ("F" & rowCount).Value = employee.PhoneNumber
		ws ("G" & rowCount).Value = employee.Email

		rowCount += 1
	Next employee

	wb.SaveAs("Employee.xlsx")
End Sub

Hemos creado un fichero Excel a partir de una lista de forma fácil y sencilla.

IronXL proporciona tutoriales, ejemplos de código y documentación para ayudarle a utilizar su completa API de la mejor manera posible.

Conclusión

En conclusión, jQuery DataTables se ha revelado como un potente recurso para transformar la presentación de datos tabulares en aplicaciones web ASP.NET. Su naturaleza ligera pero rica en funciones facilita la creación de tablas interactivas, poniendo en primer plano la ordenación, la búsqueda y la paginación. Exploramos los matices del procesamiento en el lado del cliente, aprovechando las capacidades del navegador para conjuntos de datos más pequeños y reconociendo al mismo tiempo las posibles dificultades con volúmenes de datos mayores. La guía paso a paso para configurar una aplicación ASP.NET Razor Page e integrar jQuery DataTables proporciona a los desarrolladores información práctica. Además, la introducción de IronXL como solución sin fisuras para las tareas relacionadas con Excel añade una valiosa capa al conjunto de herramientas, permitiendo una exportación eficaz de los datos. Con estas herramientas, los desarrolladores pueden mejorar la experiencia del usuario presentando los datos de forma atractiva y accesible.

IronXL ofrece varias opciones de licencia, en función del número de desarrolladores, proyectos y necesidades de redistribución. Las licencias son perpetuas e incluyen asistencia y actualizaciones gratuitas.