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

Comment automatiser le déploiement d’une Logic App standard ?

Geoffrey Mohaer

Software Development

26 septembre 2023

Les Logic Apps ont récemment fait peau neuve, comme nous vous l’avions annoncé dans un précédent article sur « Logic Apps Standard :...

Retour d’expérience sur le Domain Driven Design

Sylvain Sidambarom

Software Development

19 septembre 2023

Le Domain Driven Design (DDD) est une méthodologie qui se concentre sur le métier (Domain). Elle entend faire respecter un...

Comment utiliser Starlette-Context pour faire circuler les jetons d’autorisation entre vos APIs FastAPI ?

Marwan DARWISH

Cloud

30 mai 2023

Dans cet article, nous allons voir comment utiliser Starlette-Context avec FastAPI pour faire circuler les jetons d’autorisation entre vos différents...

Utiliser le service Event Grid dans un contexte privé pour prévenir les intrusions

Haythem Brigui

Software Development

9 mai 2023

L’intégration des systèmes est devenue une nécessité pour les entreprises modernes. Les solutions d’intégration telles qu’Azure Event Grid, un produit...

Centraliser les services avec Azure App Configuration

zahir Chelbi

Software Development

4 mai 2023

Grâce à l’approche DevOps et à la montée en puissance de l’utilisation des Clouds, le modèle d’architecture microservices devient de...

Boostez la performance de vos applications avec Asyncio : un guide pratique pour les développeurs Python

Fawzi Rida

Software Development

27 avril 2023

Actuellement, la plupart des applications se reposent fortement sur les opérations Input/Ouput (I/O). Ce type d’opération inclut le téléchargement du...

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