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.

DataTableFolder

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

DataTableArchi

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.

Datatables exemple

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).

github

A très bientôt !