Jquery Datatable (Comment ça marche pour le développeur)

La présentation des données est un aspect essentiel du développement web, et lorsqu'il s'agit de données tabulaires, il est essentiel de disposer d'un tableau interactif et riche en fonctionnalités. jQuery DataTables est une puissante bibliothèque JavaScript qui offre des fonctionnalités avancées pour la création de tableaux dynamiques et réactifs. Dans cet article, nous verrons comment intégrer et utiliser les tables de données jQuery dans un système de gestion des données ASP.NET pour améliorer la présentation des données tabulaires.

Comment utiliser les tables de données jQuery dans une application Web ASP.NET ?

1. Créer ou ouvrir une application Web.

2. Installer les paquets Entity Framework.

3. Ajouter le modèle, le contexte DB et le contrôleur.

4. Ajouter la chaîne de connexion à la base de données et définir la configuration.

5. Ajouter la base de données de migration et de mise à jour.

6. Ajouter la bibliothèque côté client de jQuery DataTables.

7. Ajouter une table HTML et du code JavaScript.

8. Construire et exécuter l'application.

9. Exporter des données dans Excel en utilisant IronXL.

Qu'est-ce que jQuery DataTables ?

jQuery DataTables est un plugin jQuery léger, flexible et riche en fonctionnalités pour gérer les données tabulaires. Il offre un large éventail de fonctionnalités, telles que le tri, la recherche, la pagination et bien d'autres, ce qui en fait un choix idéal pour présenter de grands ensembles de données de manière conviviale.

Traitement côté client

Dans le traitement côté client, le navigateur est habilité à traiter l'ensemble de données localement. grâce à ses puissantes fonctionnalités, jQuery DataTables permet une interaction et une manipulation dynamiques des données directement dans le navigateur de l'utilisateur. Si cette approche fonctionne parfaitement pour les petits ensembles de données, elle peut se heurter à des difficultés lorsqu'il s'agit de traiter des ensembles de données volumineux, en raison de goulets d'étranglement potentiels au niveau des performances et d'une consommation accrue de ressources.

Dans cet article, nous allons explorer le traitement côté client dans une application ASP.NET Razor Page, en soulignant les avantages qu'il offre pour les petits ensembles de données et en donnant un aperçu des considérations et optimisations potentielles pour garantir une expérience utilisateur fluide et réactive.

Démarrer avec jQuery DataTables dans une application Web ASP.NET

Cet article porte sur l'utilisation d'une application Web ASP.NET Razor Page ciblant le Framework .NET 4.8. Vous pouvez utiliser Blazor, MVC ou Web Forms, selon vos besoins.

L'approche "code first" sera utilisée dans cet article. Vous pouvez utiliser l'approche "Base de données d'abord" selon vos préférences. Nous devons installer les paquets suivants pour utiliser l'approche "Code First".

1. Microsoft.EntityFrameworkCore

2. Microsoft.EntityFrameworkCore.Design

3. Microsoft.EntityFrameworkCore.SqlServer

4. Microsoft.EntityFrameworkCore.Tools

   Installez les paquets ci-dessus en utilisant la commande Install-Package depuis la console NuGet Package Manager ou installez-les depuis la solution NuGet Package Manager en les recherchant.

   Configurons notre projet en ajoutant la classe Modèle, la classe ApplicationDBContext, le contrôleur, la chaîne de connexion et la configuration des services dans le fichier Program.cs.

Ajouter une classe de modèle

J'utilise la classe de modèle Employee pour cet exemple, vous pouvez l'utiliser selon vos besoins.

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

Ajouter la classe ApplicationDbContext

Nous devons ajouter la classe ApplicationDbContext pour configurer 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

Ajouter un contrôleur d'employé

Ajouter le EmployeeController pour créer le point de terminaison.

[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

Ici, nous utilisons la méthode HttpGet car nous allons récupérer les données complètes du serveur du côté client et implémenter la pagination, la recherche et le tri du côté client. Nous renvoyons un tableau JSON qui sera rendu côté client.

Ajouter la chaîne de connexion

Ajoutez la chaîne de connexion suivante dans le fichier appsettings.json.

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

Ajoutez la ligne suivante dans la classe Program.cs sous webApplication.CreateBuilder() ligne pour se connecter au serveur SQL.

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)

Exécuter la migration

L'étape suivante consiste à exécuter la migration, puisque nous utilisons l'approche "Code First". Exécutez la commande suivante dans la console du gestionnaire de paquets.

Add-Migration init

Cette commande crée une migration. Exécutez maintenant la commande suivante pour appliquer cette migration à la base de données.

update-database

Maintenant que notre projet est défini et que la base de données est prête, il nous reste à ajouter la bibliothèque jQuery et les tables HTML pour que notre interface utilisateur soit prête. Nous avons utilisé SQL Server comme source de données dans cet exemple, mais vous pouvez utiliser n'importe quelle autre base de données.

Ajouter la bibliothèque jQuery DataTables

Nous devons ajouter à notre projet la bibliothèque jQuery DataTables, qui est un plugin d'amélioration des tableaux pour la bibliothèque JavaScript jQuery. Nous pouvons l'ajouter en faisant un clic droit sur le projet, en sélectionnant "Ajouter", puis en sélectionnant "Ajouter une bibliothèque côté client". Une petite fenêtre apparaît, dans laquelle nous pouvons rechercher "jquery datatables" et l'installer, comme indiqué ci-dessous :

Ajouter un tableau HTML

Ajoutons un tableau HTML avec un corps de tableau vide. Nous ajouterons les en-têtes de colonne nécessaires lors de la configuration de la table de données jQuery. Ajoutez le code suivant au fichier 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>
}

Nous devons ajouter le fichier EmployeeDatatable.js dans le dossier wwwroot/Js. Dans ce fichier, nous aurons un appel Ajax et des fonctionnalités avancées de la table de données jQuery telles que la filtration, la pagination, la recherche, le tri, etc.

Créer le fichier EmployeeDatatable.js

Créez un fichier EmployeeDatatable.js dans le dossier wwwroot/Js. Ajoutez le code suivant.

$(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 }
        ]
    });
});

Nous avons utilisé la bibliothèque jQuery DataTables, riche en fonctionnalités. Ce puissant plugin jQuery nous permet de mettre en œuvre des fonctionnalités avancées côté client avec un minimum d'effort.

Maintenant, créez et exécutez cette application.

Sortie

Nous pouvons voir que nous avons une interface utilisateur très interactive prête avec l'aide de jQuery en ASP.NET. Les données affichées sont les suivantes :

La pagination étant mise en œuvre côté client, les données complètes sont envoyées par le serveur, comme indiqué ci-dessous :

Sortie de l'interface utilisateur

Nous pouvons rechercher, trier et modifier la page, tout cela se fera du côté du client, comme indiqué ci-dessous :

Introduction à IronXL

IronXL est une bibliothèque qui vous permet de travailler avec des fichiers Excel dans des applications .NET. Il peut créer, lire, modifier et enregistrer des documents Excel dans différents formats tels que XLS, XLSX, CSV et TSV. Il ne nécessite pas l'installation de Microsoft Office ou d'Excel Interop. Il prend en charge .NET 5, Core, Framework et Azure.

Nous avons souvent besoin d'exporter des données dans des fichiers Excel ou CSV. IronXL est le meilleur choix dans ce cas. Nous allons maintenant écrire du code pour exporter nos données dans un fichier Excel.

Installer IronXL

Installez la bibliothèque IronXL dans votre projet en saisissant la commande suivante dans la console du gestionnaire de paquets.

Install-Package IronXL.Excel

Ceci installera IronXL et les dépendances nécessaires dans notre projet. Vous pouvez également le télécharger directement à partir de cette lien de téléchargement.

Exporter des données vers Excel

Ecrivons un code pour convertir notre liste d'employés en un fichier Excel.

public void ExportToExcel(List<Employee> employeeList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    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
    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;

    // 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
    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

	' 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
	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

Nous avons créé un fichier Excel à partir d'une liste de manière simple et facile.

IronXL fournit des informations complètes sur l'état de santé de la population tutoriels, exemples de codeet la documentation pour vous aider à utiliser au mieux son API complète.

Conclusion

En conclusion, jQuery DataTables s'est révélé être un atout puissant pour transformer la présentation des données tabulaires dans les applications web ASP.NET. Sa légèreté et sa richesse fonctionnelle facilitent la création de tableaux interactifs, mettant au premier plan le tri, la recherche et la pagination. Nous avons exploré les nuances du traitement côté client, en tirant parti des capacités du navigateur pour les petits ensembles de données, tout en reconnaissant les difficultés potentielles liées à des volumes de données plus importants. Le guide étape par étape sur la mise en place d'une application ASP.NET Razor Page et l'intégration de jQuery DataTables fournit aux développeurs des informations pratiques. En outre, l'introduction d'IronXL en tant que solution transparente pour les tâches liées à Excel ajoute une couche précieuse à la boîte à outils, permettant une exportation efficace des données. Armés de ces outils, les développeurs peuvent améliorer l'expérience de l'utilisateur en présentant les données de manière convaincante et accessible.

IronXL propose différentes options de licence, en fonction du nombre de développeurs, de projets et des besoins de redistribution. Les licences sont perpétuelles et comprennent une assistance et des mises à jour gratuites.