Tabela de dados jQuery (Como funciona para desenvolvedores)
A apresentação de dados é um aspecto crucial do desenvolvimento web e, ao lidar com dados tabulares, ter uma tabela interativa e rica em recursos é essencial. jQuery DataTables é uma poderosa biblioteca JavaScript que oferece funcionalidades avançadas para a criação de tabelas dinâmicas e responsivas. Neste artigo, exploraremos como integrar e usar o jQuery DataTables em uma aplicação web ASP.NET para aprimorar a apresentação de dados tabulares.
Como usar o jQuery DataTables em um aplicativo Web ASP.NET ?
- Criar ou abrir uma aplicação web.
- Instale os pacotes do Entity Framework.
- Adicione o Modelo, o Contexto do Banco de Dados e o Controlador.
- Adicione a string de conexão do banco de dados e configure-a.
- Adicionar migração e atualizar banco de dados.
- Adicione a biblioteca jQuery DataTables do lado do cliente.
- Adicione a tabela HTML e o código JavaScript .
- Compile e execute o aplicativo.
- Exporte dados para o Excel usando o IronXL para manipulação do Excel .
O que é jQuery DataTables?
jQuery DataTables é um plugin jQuery leve, flexível e repleto de recursos para manipulação de dados tabulares. Oferece uma ampla gama de funcionalidades, como classificação, pesquisa e paginação, tornando-se uma escolha ideal para apresentar grandes conjuntos de dados de forma amigável ao usuário.
Processamento do lado do cliente
No processamento do lado do cliente, o navegador tem a capacidade de manipular o conjunto de dados localmente. O jQuery DataTables, por meio de seus recursos poderosos, permite a interação e manipulação dinâmica dos dados diretamente no navegador do usuário. Embora essa abordagem funcione perfeitamente para conjuntos de dados menores, ela pode enfrentar desafios ao lidar com conjuntos de dados extensos devido a possíveis gargalos de desempenho e aumento do consumo de recursos.
Neste artigo, exploraremos o processamento do lado do cliente em uma aplicação ASP.NET Razor Page, destacando as vantagens que ele oferece para conjuntos de dados menores e fornecendo insights sobre possíveis considerações e otimizações para garantir uma experiência de usuário fluida e responsiva.
Introdução ao uso do jQuery DataTables em uma aplicação web ASP.NET
Este artigo utilizará uma aplicação web ASP.NET Razor Page direcionada ao .NET Framework 4.8. Você pode usar Blazor, MVC ou Web Forms, conforme sua necessidade.
Neste artigo, será utilizada a abordagem Code-First. Você pode usar a abordagem Database First conforme sua preferência. Precisamos instalar os seguintes pacotes para usar a abordagem Code First.
- Microsoft.EntityFrameworkCore
- Microsoft.EntityFrameworkCore.Design
- Microsoft.EntityFrameworkCore.SqlServer
- Microsoft.EntityFrameworkCore.Tools
Instale os pacotes acima usando o comando Install-Package no Console do Gerenciador de Pacotes NuGet ou instale-os a partir da solução do Gerenciador de Pacotes NuGet , pesquisando por eles.
Vamos configurar nosso projeto adicionando a classe Model, a classe ApplicationDbContext, o Controller, a string de conexão e a configuração dos serviços no arquivo Program.cs.
Adicionar Classe de Modelo
Estou usando a classe de modelo Employee neste exemplo. Você pode usá-lo conforme sua necessidade.
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
Adicionar a classe ApplicationDbContext
Precisamos adicionar a classe ApplicationDbContext para configurar o 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
Adicionar Controlador de Funcionários
Adicione o EmployeeController para criar o 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)
{
// Log exception here
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)
{
// Log exception here
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
' Log exception here
Throw
End Try
End Function
End Class
Aqui, estamos usando o método HttpGet, pois iremos recuperar os dados completos do servidor no lado do cliente e implementar paginação, busca e ordenação no lado do cliente. Estamos retornando um array JSON que será renderizado no lado do cliente.
Adicionar string de conexão
Adicione a seguinte string de conexão no arquivo appsettings.json.
"ConnectionStrings": {
"EmployeeDB": "Server=localserver\\SQLEXPRESS;Database=EmployeeDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}
Adicione a seguinte linha na classe Program.cs, abaixo da linha webApplication.CreateBuilder(), para conectar com o 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)
Executar Migração
O próximo passo é executar a migração, pois estamos utilizando a abordagem Code First. Execute o seguinte comando no Console do Gerenciador de Pacotes.
Add-Migration init
Add-Migration init
Este comando criará uma migração. Agora, execute o seguinte comando para aplicar essa migração ao banco de dados.
update-database
update-database
Agora que nosso projeto está configurado e o banco de dados está pronto, precisamos apenas adicionar a biblioteca jQuery e as tabelas HTML para deixar nossa interface de usuário pronta. Neste exemplo, utilizamos o SQL Server como fonte de dados, mas você pode usar qualquer outro banco de dados.
Adicionar a biblioteca jQuery DataTables
Precisamos adicionar a biblioteca jQuery DataTables, que é um plugin para aprimorar a funcionalidade de tabelas da biblioteca JavaScript jQuery, ao nosso projeto. Podemos adicioná-la clicando com o botão direito do mouse no projeto, selecionando "Adicionar" e, em seguida, selecionando "Adicionar biblioteca do lado do cliente". Uma pequena janela será exibida, onde poderemos pesquisar por "jquery datatables" e instalá-lo, como mostrado abaixo:

Adicionar tabela HTML
Vamos adicionar uma tabela HTML com o corpo da tabela vazio. Adicionaremos os cabeçalhos de coluna necessários durante a configuração do jQuery DataTable. Adicione o seguinte código ao arquivo 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>
}
Precisamos adicionar o arquivo EmployeeDatatable.js dentro da pasta wwwroot/Js. Neste arquivo, teremos uma chamada Ajax e recursos avançados do jQuery DataTable, como filtragem, paginação, pesquisa, classificação, etc.
Criar arquivo EmployeeDatatable.js
Crie um arquivo EmployeeDatatable.js dentro da pasta wwwroot/Js. Adicione o seguinte 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 }
]
});
});
Utilizamos a biblioteca jQuery DataTables, que é rica em recursos. Este poderoso plugin jQuery nos permite implementar funcionalidades avançadas no lado do cliente com o mínimo esforço.
Agora, compile e execute este aplicativo.
Saída
Podemos ver que temos uma interface de usuário bastante interativa pronta com a ajuda do jQuery no ASP.NET. Os dados exibidos são os seguintes:

Agora, a paginação é implementada no lado do cliente, portanto, os dados completos são enviados do servidor, conforme mostrado abaixo:

Interface de saída
Podemos pesquisar, classificar e alterar a página; tudo será realizado no lado do cliente, conforme mostrado abaixo:

Introdução ao IronXL
IronXL para manipulação de arquivos Excel em .NET é uma biblioteca que permite trabalhar com arquivos Excel em aplicações .NET . Ele pode criar, ler, editar e salvar documentos do Excel em vários formatos, como XLS, XLSX, CSV e TSV. Não requer a instalação do Microsoft Office ou do Excel Interop. É compatível com .NET 5, Core, Framework e Azure.
Frequentemente, temos a necessidade de exportar dados para arquivos Excel ou CSV. IronXL é a melhor opção neste caso. Agora, vamos escrever o código para exportar nossos dados para um arquivo do Excel.
Instale o IronXL
Instale a biblioteca IronXL em seu projeto digitando o seguinte comando no Console do Gerenciador de Pacotes.
Install-Package IronPdf
Isso instalará o IronXL e as dependências necessárias em nosso projeto. Você também pode baixá-lo diretamente do pacote NuGet do IronXL .
Exportar dados para o Excel
Vamos escrever um código para converter nossa lista de funcionários em um arquivo do Excel.
public void ExportToExcel(List<Employee> employeeList)
{
// Create a new workbook instance
WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
// Get the default worksheet
WorkSheet ws = wb.DefaultWorkSheet;
// Add Header Row
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;
// Add Data Rows
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++;
}
// Save the workbook as an Excel file
wb.SaveAs("Employee.xlsx");
}
public void ExportToExcel(List<Employee> employeeList)
{
// Create a new workbook instance
WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
// Get the default worksheet
WorkSheet ws = wb.DefaultWorkSheet;
// Add Header Row
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;
// Add Data Rows
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++;
}
// Save the workbook as an Excel file
wb.SaveAs("Employee.xlsx");
}
Public Sub ExportToExcel(ByVal employeeList As List(Of Employee))
' Create a new workbook instance
Dim wb As WorkBook = WorkBook.Create(ExcelFileFormat.XLSX)
' Get the default worksheet
Dim ws As WorkSheet = wb.DefaultWorkSheet
' Add Header Row
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
' Add Data Rows
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
' Save the workbook as an Excel file
wb.SaveAs("Employee.xlsx")
End Sub
Criamos um arquivo Excel a partir de uma lista de forma simples e fácil.

O IronXL oferece tutoriais completos sobre como criar arquivos XLSX , exemplos de código para leitura de arquivos Excel e documentação detalhada para ajudá-lo a utilizar sua API abrangente da melhor maneira possível.
Conclusão
Em conclusão, o jQuery DataTables emergiu como um recurso poderoso para transformar a apresentação de dados tabulares em aplicações web ASP.NET . Sua natureza leve, porém rica em recursos, facilita a criação de tabelas interativas, colocando a classificação, a pesquisa e a paginação em primeiro plano. Exploramos as nuances do processamento do lado do cliente, aproveitando os recursos do navegador para conjuntos de dados menores, ao mesmo tempo que reconhecemos os potenciais desafios com volumes de dados maiores. O guia passo a passo sobre como configurar um aplicativo ASP.NET Razor Page e integrar o jQuery DataTables fornece aos desenvolvedores informações práticas. Além disso, a introdução do IronXL como uma solução integrada para tarefas relacionadas ao Excel adiciona uma camada valiosa ao conjunto de ferramentas, permitindo a exportação eficiente de dados. Munidos dessas ferramentas, os desenvolvedores podem aprimorar a experiência do usuário, apresentando os dados de maneira atraente e acessível.
A IronXL oferece diversas opções de licenciamento, dependendo do número de desenvolvedores, projetos e necessidades de redistribuição. As licenças são perpétuas e incluem suporte e atualizações gratuitas.
Perguntas frequentes
Como o jQuery DataTables pode aprimorar a apresentação de dados em aplicações web ASP.NET?
O jQuery DataTables aprimora a apresentação de dados, fornecendo recursos como classificação, pesquisa e paginação, o que facilita a interação dos usuários com grandes conjuntos de dados de maneira responsiva e amigável.
Quais são os passos básicos para integrar o jQuery DataTables em uma aplicação ASP.NET Razor Page?
Para integrar o jQuery DataTables em uma aplicação ASP.NET Razor Page, você começa configurando o modelo, o DbContext e o controlador, configura a conexão com o banco de dados e implementa o processamento do lado do cliente para gerenciar os dados de forma eficiente usando a abordagem Code-First com o Entity Framework.
Como o processamento no servidor beneficia o jQuery DataTables ao gerenciar grandes conjuntos de dados?
O processamento no servidor beneficia o jQuery DataTables ao transferir as operações de dados para o servidor, o que melhora o desempenho e a eficiência ao lidar com grandes conjuntos de dados, em oposição ao processamento no lado do cliente, que pode ficar mais lento com grandes volumes de dados.
Qual é o papel do IronXL na exportação de dados para o Excel a partir de uma aplicação ASP.NET?
O IronXL permite que os desenvolvedores exportem dados para o Excel criando uma nova planilha, preenchendo-a com as linhas de dados do conjunto de dados e salvando-a como um arquivo do Excel. Isso simplifica a manipulação de arquivos do Excel sem a necessidade do Microsoft Office.
É possível trabalhar com arquivos do Excel em aplicações .NET sem o Microsoft Office?
Sim, o IronXL permite que aplicativos .NET trabalhem com arquivos do Excel independentemente do Microsoft Office, oferecendo suporte a vários formatos, como XLS, XLSX, CSV e TSV.
Quais são as opções de licenciamento para usar o IronXL em projetos .NET?
A IronXL oferece diversas opções de licenciamento com base no número de desenvolvedores, projetos e requisitos de distribuição. As licenças são perpétuas e incluem suporte e atualizações gratuitas.
Quais são as vantagens de usar a abordagem Code-First em ASP.NET com jQuery DataTables?
A abordagem Code-First em ASP.NET com jQuery DataTables oferece suporte à fácil configuração e ao gerenciamento do modelo e contexto do banco de dados, permitindo a integração dinâmica de dados com o DataTables do front-end para maior interatividade.
Como solucionar problemas comuns com o jQuery DataTables em uma aplicação ASP.NET?
Problemas comuns com o jQuery DataTables podem ser resolvidos garantindo a inclusão correta de scripts e folhas de estilo, verificando os caminhos da fonte de dados, verificando erros no console em busca de problemas de JavaScript e confirmando a configuração adequada do processamento no servidor.




