Icône de message
Passer au contenu du pied de page
  1. IronPDF
  2. Blog IronPDF
  3. .NET Aide
  4. Jquery Datatable
.NET AIDE

Jquery Datatable (Comment ça fonctionne pour les développeurs)

Curtis Chau
Curtis Chau
Mis à jour:

La présentation des données est un aspect critique du développement web, et lorsqu'on traite des données tabulaires, avoir un tableau interactif et riche en fonctionnalités est essentiel. jQuery DataTables est une bibliothèque JavaScript puissante qui offre des fonctionnalités avancées pour créer des tableaux dynamiques et réactifs. Dans cet article, nous verrons comment intégrer et utiliser jQuery DataTables dans une application web ASP.NET pour améliorer la présentation des données tabulaires.

Comment utiliser jQuery DataTables dans une application web ASP.NET ?

  1. Créer ou ouvrir une application Web.
  2. Installer les paquets Entity Framework.
  3. Ajouter Modèle, Contexte BD, et Contrôleur.
  4. Ajouter la chaîne de connexion BD et configurer la configuration.
  5. Ajouter la migration et mettre à jour la base de données.
  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 vers Excel en utilisant IronXL pour la manipulation Excel.

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 une large gamme de fonctionnalités, telles que le tri, la recherche et la pagination, 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é à gérer l'ensemble de données localement. jQuery DataTables, grâce à ses fonctionnalités puissantes, permet une interaction dynamique et une manipulation des données directement dans le navigateur de l'utilisateur. Bien que cette approche fonctionne parfaitement pour les ensembles de données plus petits, elle peut rencontrer des défis lorsque les ensembles de données sont importants en raison de goulots d'étranglement potentiels en termes de performance et de consommation accrue de ressources.

Dans cet article, nous explorerons le traitement côté client dans une application de page Razor ASP.NET, en soulignant les avantages qu'il offre pour les ensembles de données plus petits et en fournissant des idées sur les considérations et optimisations potentielles pour garantir une expérience utilisateur fluide et réactive.

Commencer avec jQuery DataTables dans une application Web ASP.NET

Cet article utilisera une application Web de page Razor ASP.NET ciblant .NET Framework 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 Database First 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

Installer les paquets ci-dessus en utilisant la commande Install-Package depuis la console du gestionnaire de paquets NuGet ou les installer depuis la solution du gestionnaire de paquets NuGet 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 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
$vbLabelText   $csharpLabel

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
$vbLabelText   $csharpLabel

Ajouter un contrôleur Employee

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)
        {
            // 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
$vbLabelText   $csharpLabel

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

Ajouter une chaîne de connexion

Ajouter 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;"
}

Ajouter la ligne suivante dans la classe Program.cs sous la ligne webApplication.CreateBuilder() pour se connecter à 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)
$vbLabelText   $csharpLabel

Exécuter la migration

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

Add-Migration init
Add-Migration init
SHELL

Cette commande créera une migration. Maintenant, exécutez la commande suivante pour appliquer cette migration à la base de données.

update-database
update-database
SHELL

Maintenant que notre projet est configuré et que la base de données est prête, nous devons simplement ajouter la bibliothèque jQuery et les tables HTML pour rendre notre interface utilisateur prête. Nous avons utilisé SQL Server comme source de données dans cet exemple, mais vous pouvez utiliser toute autre base de données.

Ajouter la bibliothèque jQuery DataTables

Nous devons ajouter la bibliothèque jQuery DataTables, qui est un plugin d'amélioration de table pour la bibliothèque JavaScript jQuery, dans notre projet. Nous pouvons l'ajouter en cliquant avec le bouton droit sur le projet, en sélectionnant 'Ajouter', puis en choisissant 'Ajouter une bibliothèque côté client'. Une petite fenêtre apparaîtra, où nous pourrons rechercher 'jquery datatables' et l'installer, comme montré ci-dessous :

Ajouter la bibliothèque jQuery DataTables

Ajouter un tableau HTML

Ajoutons un tableau HTML avec un corps de table vide. Nous ajouterons les en-têtes de colonnes requis lors de la configuration du jQuery DataTable. 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 jQuery DataTable comme 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 }
        ]
    });
});
JAVASCRIPT

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

Maintenant, construisez et exécutez cette application.

Sortie

Nous pouvons voir que nous avons une interface utilisateur très interactive prête grâce à jQuery dans ASP.NET. Les données affichées sont les suivantes :

Sortie jQuery DataTables

Maintenant, la pagination est implémentée côté client, donc les données complètes sont envoyées par le serveur comme ci-dessous :

Pagination

Sortie UI

Nous pouvons rechercher, trier et changer de page, tout sera effectué côté client comme montré ci-dessous :

UI de Sortie

Introduction à IronXL

IronXL pour la manipulation des fichiers Excel .NET est une bibliothèque qui vous permet de travailler avec des fichiers Excel dans des applications .NET. Elle peut créer, lire, modifier et enregistrer des documents Excel dans divers formats comme XLS, XLSX, CSV, et TSV. Elle ne nécessite pas l'installation de Microsoft Office ou d'Excel Interop. Elle 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. Maintenant, nous allons écrire du code pour exporter nos données dans un fichier Excel.

Installer IronXL

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

Install-Package IronPdf

Cela installera IronXL et les dépendances requises dans notre projet. Vous pouvez également la télécharger directement depuis IronXL NuGet Package.

Exporter des données vers Excel

Écrivons le code pour convertir notre liste d'employés en un fichier 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
$vbLabelText   $csharpLabel

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

Fichier Excel SORTIE

IronXL provides comprehensive tutorials on creating XLSX files, code examples for reading Excel files, and detailed documentation to help you utilize its comprehensive API in the best way possible.

Conclusion

En conclusion, jQuery DataTables a émergé comme un atout puissant pour transformer la présentation des données tabulaires dans les applications web ASP.NET. Sa nature légère mais riche en fonctionnalités facilite la création de tableaux interactifs, mettant le tri, la recherche et la pagination au premier plan. Nous avons exploré les nuances du traitement côté client, tirant parti des capacités du navigateur pour les ensembles de données plus petits tout en reconnaissant les défis potentiels avec des volumes de données plus importants. Le guide étape par étape sur la configuration d'une application de Page Razor ASP.NET et l'intégration de jQuery DataTables fournit aux développeurs des insights pratiques. De plus, l'introduction de IronXL comme 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. Avec ces outils, les développeurs peuvent améliorer l'expérience utilisateur en présentant les données de manière attrayante et accessible.

IronXL propose diverses options de licences, selon le nombre de développeurs, de projets, et les besoins de redistribution. Les licences sont perpétuelles et incluent une assistance et des mises à jour gratuites.

Questions Fréquemment Posées

Comment jQuery DataTables peut-il améliorer la présentation des données dans les applications Web ASP.NET ?

jQuery DataTables améliore la présentation des données en offrant des fonctionnalités telles que le tri, la recherche et la pagination, permettant aux utilisateurs d'interagir plus facilement avec de grands ensembles de données de manière réactive et conviviale.

Quelles sont les étapes de base pour intégrer jQuery DataTables dans une application de page Razor ASP.NET ?

Pour intégrer jQuery DataTables dans une application de page Razor ASP.NET, vous commencez par configurer le modèle, le DbContext et le contrôleur, configurer la connexion à la base de données, et implémenter le traitement côté client pour gérer efficacement les données en utilisant l'approche Code-First avec Entity Framework.

Comment le traitement côté serveur bénéficie-t-il à jQuery DataTables lorsqu'il gère de grands ensembles de données ?

Le traitement côté serveur bénéficie à jQuery DataTables en déchargeant les opérations de données sur le serveur, ce qui améliore les performances et l'efficacité lors de la gestion de grands ensembles de données, contrairement au traitement côté client qui peut ralentir avec de gros volumes de données.

Quel rôle joue IronXL dans l'exportation de données vers Excel depuis une application ASP.NET ?

IronXL permet aux développeurs d'exporter des données vers Excel en créant un nouveau classeur, en le remplissant avec des lignes de données provenant de l'ensemble de données, et en l'enregistrant sous forme de fichier Excel. Il simplifie la manipulation des fichiers Excel sans avoir besoin de Microsoft Office.

Est-il possible de travailler avec les fichiers Excel dans les applications .NET sans Microsoft Office ?

Oui, IronXL permet aux applications .NET de travailler avec les fichiers Excel indépendamment de Microsoft Office, en prenant en charge divers formats tels que XLS, XLSX, CSV et TSV.

Quelles sont les options de licence pour utiliser IronXL dans les projets .NET ?

IronXL offre diverses options de licence basées sur le nombre de développeurs, de projets et les exigences de distribution. Les licences sont perpétuelles et incluent un support gratuit et des mises à jour.

Quels sont les avantages de l'utilisation de l'approche Code-First dans ASP.NET avec jQuery DataTables ?

L'approche Code-First dans ASP.NET avec jQuery DataTables prend en charge une configuration facile du modèle de base de données et du contexte, permettant une gestion dynamique des données et une intégration avec le front-end des DataTables pour une interactivité améliorée.

Comment pouvez-vous dépanner les problèmes courants avec jQuery DataTables dans une application ASP.NET ?

Les problèmes courants avec jQuery DataTables peuvent être résolus en s'assurant de l'inclusion correcte des scripts et feuilles de style, en vérifiant les chemins des sources de données, en vérifiant les erreurs de console pour les problèmes JavaScript, et en confirmant la configuration correcte du traitement côté serveur.

Curtis Chau
Curtis Chau
  Discutez maintenant avec l'équipe d'ingénierie
Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Lire la suite

Articles connexes

Essai de 30 jours → Produit complet. Pas de limites. Pas de carte. Démarrer l'essai gratuit