Georges Damien

28 janvier 2015

Datatables jquery avec ASP.NET MVC 5 – 1ère partie

Le “Datatables Jquery” est un outil open source javascript permettant d’afficher des données sous forme de tableau sur votre application Web. Nous allons voir dans cette 1ère partie comment l’utiliser dans une application asp.net mvc 5.

Pourquoi l’utiliser ?

D’abord parce qu’il est gratuit, mais surtout parce qu’il intègre nativement un ensemble de fonctionnalités récurrentes que l’on vous demandera, en général, d’implémenter sur un tableau :

Tri
Pagination
Fonction de recherche
Filtre sur le nombre d’éléments à afficher
Personnalisation des filtres
“Responsive”
Gestion des langues
Personnalisation de toutes les fonctionnalités proposées
Chargement via Ajax

Afin d’éviter de “recoder” perpétuellement les mêmes fonctionnalités de base que l’on retrouve dans l’affichage d’une liste d’éléments (chose qu’on retrouve quasiment sur tous les projets), nous allons donc utiliser le plugin “DataTables“.

Comment l’utiliser ?

Le Datatables s’utilise sur tout type de site web html.

D’abord, il faut télécharger la librairie sur http://www.datatables.net/

La version que j’utilise dans ce billet est la dernière en date (1.10.4). Une fois le package téléchargé, vous y trouverez tout un ensemble d’éléments (dont les scripts et css de base), des exemples d’utilisation ainsi que des extensions supplémentaires.

Contenu du package Datatables

Le contenu du dossier média contient l’essentiel pour utiliser la librairie : les css, les js et quelques images. Une fois ces fichiers ajoutés sur votre site, l’utilisation basique du datable ressemble au code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables exmple/title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
</style>

<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>

</head>

<body>
<table id="example" cellspacing="0" width="100%">
</table>

<script type="text/javascript" language="javascript" class="init">

var dataSet = [

['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],
['Gecko', 'Firefox 1.0', 'Win 98+ / OSX.2+', '1.7', 'A'],
['Webkit', 'S60', 'S60', '413', 'A'],
['Presto', 'Opera 7.0', 'Win 95+ / OSX.1+', '-', 'A'],
['KHTML', 'Konqureror 3.1', 'KDE 3.1', '3.1', 'C'],
['Tasman', 'Internet Explorer 4.5', 'Mac OS 8-9', '-', 'X'],
['Misc', 'NetFront 3.1', 'Embedded devices', '-', 'C']
];

$(document).ready(function () {
$('#example').dataTable({
"data": dataSet,
"columns": [
{ "title": "Engine" },
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "class": "center" },
{ "title": "Grade", "class": "center" }
]
});
});
</script>
</body>
</html>

Intégration dans ASP.NET MVC 5

Pour cette démo, je vais utiliser le template asp.net mvc 5 sans mode d’authentification. Une fois mon projet initialisé, je rajoute respectivement dans les répertoires ‘Content’, ‘Images’ et ‘Script’ les fichiers css, images et scripts js contenus dans le répertoire ‘media’ du package du Datables. Au passage, j’ai créé dans chacun de ces répertoires un sous- répertoire ‘Datatables’ pour bien distinguer cette librairie.

PS : cette réorganisation des fichiers engendre des erreurs de récupération des images (servant pour les tris par exemple). Il faut donc penser à corriger les liens dans les fichiers css :

Par exemple, dans mon cas, la css suivante :

table.dataTable thead .sorting {
background: url("../images/sort_both.png") no-repeat center right;
}

devient :

table.dataTable thead .sorting {
background: url("../images/Datatables/sort_both.png") no-repeat center right;
}

exemple d’intégration des fichiers ‘datatables’ dans une solution asp.net mvc 5

Cette décomposition est, bien entendu, à titre d’exemple. Chaque projet a son architecture à part entière : du moment où vos références aux fichiers de la librairie sont correctes là où elles sont appelées, celle-ci fonctionnera correctement. Dans notre exemple asp.net mvc 5, je vais directement les référencer dans le fichier “Bundle.Config” comme tel :

  public static void RegisterBundles(BundleCollection bundles)
 {
 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
 "~/Scripts/jquery-{version}.js"));

 bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
 "~/Scripts/jquery.validate*"));

 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
 "~/Scripts/modernizr-*"));

 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
 "~/Scripts/bootstrap.js",
 "~/Scripts/respond.js",
 "~/Scripts/Datatables/jquery.dataTables.min.js"));

 bundles.Add(new StyleBundle("~/Content/css").Include(
 "~/Content/bootstrap.css",
 "~/Content/site.css",
 "~/Content/Datatables/jquery.dataTables.min.css"));

 BundleTable.EnableOptimizations = true;
 }

Prérequis

Vous l’aurez compris, le principal prérequis pour l’utilisation de cette librairie est le chargement préalable de la librairie “JQUERY’ : cela tombe bien dans notre cas, puisqu’elle est déjà intégrée au projet asp.net mvc 5.

Utilisation dans notre View Asp.net mvc 5

Voici le contenu de ma View mvc utilisant le ‘Datatables’ :

@{
 ViewBag.Title = "Home Page";
}

<div class="jumbotron">
 <h4>DEMO DATATABLES JQUERY</h4>

</div>

<div class="row">
 <table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
 </table>
</div>

@section scripts
{
 <script>
 var dataSet = [
 ['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],
 ['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'],
 ['Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'],
 ['Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'],
 ['Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'],
 ['Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A'],
 ['Gecko', 'Firefox 1.0', 'Win 98+ / OSX.2+', '1.7', 'A'],
 ['Gecko', 'Firefox 1.5', 'Win 98+ / OSX.2+', '1.8', 'A'],
 ['Gecko', 'Firefox 2.0', 'Win 98+ / OSX.2+', '1.8', 'A'],
 ['Gecko', 'Firefox 3.0', 'Win 2k+ / OSX.3+', '1.9', 'A'],
 ['Gecko', 'Camino 1.0', 'OSX.2+', '1.8', 'A'],
 ['Gecko', 'Camino 1.5', 'OSX.3+', '1.8', 'A'],
 ['Gecko', 'Netscape 7.2', 'Win 95+ / Mac OS 8.6-9.2', '1.7', 'A'],
 ['Gecko', 'Netscape Browser 8', 'Win 98SE+', '1.7', 'A'],
 ['Gecko', 'Netscape Navigator 9', 'Win 98+ / OSX.2+', '1.8', 'A'],
 ['Gecko', 'Mozilla 1.0', 'Win 95+ / OSX.1+', 1, 'A'],
 ['Gecko', 'Mozilla 1.1', 'Win 95+ / OSX.1+', 1.1, 'A'],
 ['Gecko', 'Mozilla 1.2', 'Win 95+ / OSX.1+', 1.2, 'A'],
 ['Gecko', 'Mozilla 1.3', 'Win 95+ / OSX.1+', 1.3, 'A'],
 ['Gecko', 'Mozilla 1.4', 'Win 95+ / OSX.1+', 1.4, 'A'],
 ['Gecko', 'Mozilla 1.5', 'Win 95+ / OSX.1+', 1.5, 'A'],
 ['Gecko', 'Mozilla 1.6', 'Win 95+ / OSX.1+', 1.6, 'A'],
 ['Gecko', 'Mozilla 1.7', 'Win 98+ / OSX.1+', 1.7, 'A'],
 ['Gecko', 'Mozilla 1.8', 'Win 98+ / OSX.1+', 1.8, 'A'],
 ['Gecko', 'Seamonkey 1.1', 'Win 98+ / OSX.2+', '1.8', 'A'],
 ['Gecko', 'Epiphany 2.20', 'Gnome', '1.8', 'A'],
 ['Webkit', 'Safari 1.2', 'OSX.3', '125.5', 'A'],
 ['Webkit', 'Safari 1.3', 'OSX.3', '312.8', 'A'],
 ['Webkit', 'Safari 2.0', 'OSX.4+', '419.3', 'A'],
 ['Webkit', 'Safari 3.0', 'OSX.4+', '522.1', 'A'],
 ['Webkit', 'OmniWeb 5.5', 'OSX.4+', '420', 'A'],
 ['Webkit', 'iPod Touch / iPhone', 'iPod', '420.1', 'A'],
 ['Webkit', 'S60', 'S60', '413', 'A'],
 ['Presto', 'Opera 7.0', 'Win 95+ / OSX.1+', '-', 'A'],
 ['Presto', 'Opera 7.5', 'Win 95+ / OSX.2+', '-', 'A'],
 ['Presto', 'Opera 8.0', 'Win 95+ / OSX.2+', '-', 'A'],
 ['Presto', 'Opera 8.5', 'Win 95+ / OSX.2+', '-', 'A'],
 ['Presto', 'Opera 9.0', 'Win 95+ / OSX.3+', '-', 'A'],
 ['Presto', 'Opera 9.2', 'Win 88+ / OSX.3+', '-', 'A'],
 ['Presto', 'Opera 9.5', 'Win 88+ / OSX.3+', '-', 'A'],
 ['Presto', 'Opera for Wii', 'Wii', '-', 'A'],
 ['Presto', 'Nokia N800', 'N800', '-', 'A'],
 ['Presto', 'Nintendo DS browser', 'Nintendo DS', '8.5', 'C/A<sup>1</sup>'],
 ['KHTML', 'Konqureror 3.1', 'KDE 3.1', '3.1', 'C'],
 ['KHTML', 'Konqureror 3.3', 'KDE 3.3', '3.3', 'A'],
 ['KHTML', 'Konqureror 3.5', 'KDE 3.5', '3.5', 'A'],
 ['Tasman', 'Internet Explorer 4.5', 'Mac OS 8-9', '-', 'X'],
 ['Tasman', 'Internet Explorer 5.1', 'Mac OS 7.6-9', '1', 'C'],
 ['Tasman', 'Internet Explorer 5.2', 'Mac OS 8-X', '1', 'C'],
 ['Misc', 'NetFront 3.1', 'Embedded devices', '-', 'C'],
 ['Misc', 'NetFront 3.4', 'Embedded devices', '-', 'A'],
 ['Misc', 'Dillo 0.8', 'Embedded devices', '-', 'X'],
 ['Misc', 'Links', 'Text only', '-', 'X'],
 ['Misc', 'Lynx', 'Text only', '-', 'X'],
 ['Misc', 'IE Mobile', 'Windows Mobile 6', '-', 'C'],
 ['Misc', 'PSP browser', 'PSP', '-', 'C'],
 ['Other browsers', 'All others', '-', '-', 'U']
 ];

 $(document).ready(function () {
 $('#example').dataTable({
 "data": dataSet,
 "columns": [
 { "title": "Engine" },
 { "title": "Browser" },
 { "title": "Platform" },
 { "title": "Version", "class": "center" },
 { "title": "Grade", "class": "center" }
 ]
 });
 });
</script>
}

Je charge ici une liste JSON d’éléments instanciés dans le script en fin de page. L’instanciation du ‘Datatables’ s’effectue simplement en appelant la fonction “datatable” (sans le S à la fin) à partir d’un tableau du DOM (ici c’est le tableau avec l’ID ‘exemple’). Il existe tout un ensemble de fonctions permettant la ‘customisation’ du tableau. Dans l’exemple précédent, j’ai rajouté les entêtes de colonnes de mon tableau via la propriété “columns” du ‘Datatables’. Ma source de données provient de mon JSON instancié ici en dur dans la variable “dataset”. Je pourrais, bien évidemment, charger cette liste directement depuis un appel Ajax (nous le verrons dans mon prochain billet).

Au passage, j’ai rajouté quelques classes css ‘bootstrap’ au tableau, histoire d’avoir un aperçu acceptable.

class="table table-striped table-hover dt-responsive"

Sans spécification particulière, le “Datatables” activera ses fonctionnalités par défaut (tri, pagination, recherche, etc). On aura en résultat un tableau déjà “opérationnel”. Nous pourrons cependant personnaliser ou désactiver chacune des fonctionnalités proposées.

Exemple d’affichage du “Datatables”

Internationalisation

Pour adapter les différents titres dans votre langue, vous trouverez ici votre bonheur. Vous pourrez cependant personnaliser vous- même les traductions. Voici un exemple pour la langue française :

  // Initialisation de la langue française
 "language": {
 "sProcessing": "Traitement en cours...",
 "sSearch": "Rechercher&nbsp;:",
 "sLengthMenu": "Afficher _MENU_ &eacute;l&eacute;ments",
 "sInfo": "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
 "sInfoEmpty": "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
 "sInfoFiltered": "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
 "sInfoPostFix": "",
 "sLoadingRecords": "Chargement en cours...",
 "sZeroRecords": "Aucun &eacute;l&eacute;ment &agrave; afficher",
 "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",
 "oPaginate": {
 "sFirst": "Premier&nbsp;&nbsp;",
 "sPrevious": "Pr&eacute;c&eacute;dent&nbsp;&nbsp;",
 "sNext": "Suivant",
 "sLast": "&nbsp;&nbsp;Dernier"
 },
 "oAria": {
 "sSortAscending": ": activer pour trier la colonne par ordre croissant",
 "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
 }
 },
 // désactivation de la pagination
 "paginate": false,

Au passage, j’ai désactivé la pagination à titre illustratif.

Conclusion

Dans cette 1ère partie, nous avons pu voir comment instancier de façon simple un “Datatables Jquery”, ainsi que quelques options. Je vous laisse découvrir sur le site du “Datatables” les différentes fonctionnalités proposées. Dans mon prochain billet, je vous présenterai comment interagir avec le serveur, et notamment comment récupérer des données via Ajax et comment passer des paramètres de filtre au serveur.

Comme d’habitude, vous trouverez le code source de cet exemple sur mon git (ci-dessous).

A très bientôt !

Nos autres articles

Provider Terraform AzAPI : usages et cas pratiques

David Frappart

Software Development

23 mars 2023

Article coécrit par David Frappart et Souha Bel Haj Hassine Dans ce nouvel article, nous allons parler du formidable...

Logic App Standard : appeler une Azure Function depuis un mapping XSLT

Valentin Houser

Software Development

28 février 2023

Aujourd’hui, dans le cadre d’un projet d’intégration, nous pouvons énumérer de nombreux scénarios nécessitant conversion, transcodification ou encore formatage ou...

Comment gérer les évènements d’intégration dans une architecture pilotée par les évènements ?

Majed Boukadida

Software Development

17 janvier 2023

L’architecture pilotée par les évènements est un modèle d’architecture qui repose sur la gestion des évènements (enregistrement, publication, consommation, etc.)....

«Table Per Concrete Type » avec Entity Framework Core 7

Sylvain Sidambarom

Software Development

15 décembre 2022

Dans cet article, nous allons voir la nouvelle stratégie de gestion d’un modèle de données ayant une hiérarchie avec Entity...

Synapse Analytics : comment mettre en œuvre le CI/CD sur Azure DevOps ?

Marwan DARWISH

Cloud

17 novembre 2022

Dans ce billet de blog, nous allons nous pencher sur les pipelines d’intégration de données Synapse Analytics. Vous pourrez également vous...

Minimal API dans ASP.NET Core

Sylvain Sidambarom

Software Development

10 novembre 2022

Les minimal APIs sont sorties en même temps que .NET 6, C# 10 et de nombreuses améliorations de performance. Mais...

Commentaires

Un partage très utile! Merci beaucoup!

Répondre

Bonsoir,
Merci pour ce tuto.
je suis un peu embrouillé par le bootstrap. si je veux juste utiliser la librairie Datables sans le bootstrap que dois-je mettre au niveau de _layout :
actuellement on a :

@Scripts.Render(“~/bundles/jquery”)
@Scripts.Render(“~/bundles/bootstrap”)
@RenderSection(“scripts”, required: false)
Merci.

Répondre

Hello,
en fait dans mon exemple sur github, j’ai mis la librairie DataTables dans le même Bundle que BootStrap :
bundles.Add(new ScriptBundle(“~/bundles/bootstrap”).Include(
“~/Scripts/bootstrap.js”,
“~/Scripts/respond.js”,
“~/Scripts/Datatables/jquery.dataTables.min.js”));
C’est pas spécialement la meilleur approche. Tu peux te créer un bundle à part avec uniquement la librairie Datatables et l’injecter dans les pages où tu t’en sert : “~/Scripts/Datatables/jquery.dataTables.min.js”.

Laisser un commentaire