ENI RV p.
1
Framework jQuery UI
jQuery UI est une surcouche de jQuery qui propose des outils pour créer des interfaces graphiques
interactives. Elle se compose de 3 packages contenant un certain nombre de plugins qu’on retrouve dans le
dossier /ui de votre librairie.
Interactions
Des composants pour rendre vos pages web dynamique :
Draggable : Rend un élément de la page "draggable" (au sens glisser-déposer)
Droppable : Transforme un élément de la page en une cible pour un élément "draggable"
Resizable : Rend un élément redimensionnable
Selectable : Rend un élément sélectionnable à la souris
Sortable : Rend un élément "triable"
Widgets
Quelques widgets très pratiques :
Accordion : Créer un menu accordéon
Dialog : Créer une boite de dialogue
Slider : Créer un "Slider" pour sélectionner une valeur sur une échelle
Tabs : Créer une structure d'onglets
DatePicker : Créer un DatePicker (pour avoir le choix dans la date...)
ProgressBar Créer une barre de progression
Effects
Effets Core : Etend la librairie de base de jquery et inclut des effets tel que le morphing
Effet Blind : Fait disparaitre un élément comme un menu déroulant qui se referme
Effet Bounce : "Secoue" l'élément de haut en bas pendant n seconde(s)
Effet Clip : Fait disparaitre un élément à la manière d'une vieille télé qui s'éteint
Effet Drop : Fait disparaitre l'élément de droite à gauche
Effet Explode : Fait disparaitre l'élément en "l'éclatant" en n partie(s). Supporte aussi l'implosion.
Effet Fold : Fait disparaitre un élément d'abord horizontalement puis verticalement
Effet Highlight : Met en exergue l'élément en le colorant pendant n seconde(s)
Effet Pulsate : Fait clignoter l'élément en changeant son opacité
Effet Scale : "Perturbe" un élément puis lui rend sa forme initiale
Effet Shake : Secoue un élément horizontalement ou verticalement pendant n secondes
Effet Slide : Fait apparaitre un élément en le "glissant" sur la page
Effet "Transfer" : Transfère un effet d'un élément à un autre
Pour utiliser jQuery UI, il faut inclure jQuery dans votre page web avec la balise <script> , mais il faut aussi
ajouter le fichier .js de jQuery UI ainsi qu'une feuille de style.
En effet, jQuery UI fonctionne avec des thèmes (CSS), ces thèmes sont nécessaires pour afficher
correctement les widgets notamment.
voici le code à mettre dans le <head>:
.<!-- Importation des librairies nécessaires -->
?<!-- Librairie jquery -->
<script type="text/javascript" src="[Link]"></script>
<!-- librairie UI -->
<script type="text/javascript" src="[Link]"></script>
<!-- Importation des feuilles de style de Jquery -->
<link rel="stylesheet" type="text/css" href="themes/[Link]"
/>
1. Datepicker
le Datepicker affiche un calendrier pour choisir une date.
<html >
ENI RV p.2
<head>
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="themes/[Link]" rel="stylesheet" />
<script type="text/javascript" src="[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
Ou bien
<!-- <link type="text/css" href="themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
Ou bien
<!-- <script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href="themes2/[Link]" rel="stylesheet" />
<script type="text/javascript" src="ui2/[Link]"></script>
<script type="text/javascript" src="ui2/[Link]"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<div >
<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
</body>
</html>
<PrevTodayNext>
Su Mo Tu We Th Fr Sa
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Les mois sont affichés en Anglais (langue par défaut). Mais il est possible d'utiliser une traduction dans la
langue de votre choix.
Dans le cas présent, il suffit de mettre ce code JavaScript avant d'utiliser le datepicker, pour définir sa
langue.
$.[Link]['fr'] = {
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames:
['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
dayNamesMin: ['D','L','M','M','J','V','S'],
weekHeader: 'Sem.',
dateFormat: 'dd/mm/yy',
firstDay: 1,
ENI RV p.3
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
//Set all date pickers to have French text.
$.[Link]($.[Link]['fr']);
Le format de date peut être combiné des caractères suivants::
• d – jour du mois
• dd – jour du mois(2 digits)
• o – jour de l’année
• oo - – jour de l’année (3 digits)
• D – nom court du jour
• DD - nom long du jour
• m – mois de l’année
• mm - mois de l’année (2 digit)
• M - nom court du mois
• MM - nom long du jour
• y – l’année (2 digit)
• yy – l’année (4 digit)
• '...' - texte literal
• '' – quote simple
2. Slider
Le slider jQuery est un widget qu'on utilise généralement dans les formulaires, pour permettre à l'utilisateur
de sélectionner une valeur ou un intervalle de valeurs.
Exemple 1: un simple slider horizontal pouvant être déplacé avec la souris
!doctype html>
<html lang="en">
<head>
<title>jQuery UI Slider - Default functionality</title>
<link type="text/css" href="themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src=".jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href="[Link]" rel="stylesheet" />
<style type="text/css">
#demo-frame > [Link] { padding: 10px !important; };
</style>
<script type="text/javascript">
$(function() {
$("#slider").slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
ENI RV p.4
Exemple 2 : un slider en mode range (traduction : "intervalle") permettant de définir une fourchette de prix
entre le prix minimum et le prix maximum.
<form id="form">
<div><b>Fourchette de prix :</b></div><br/>
<div id="bornes_prix">De <span id="prix_min"></span> à <span id="prix_max"></span> €</div>
<div id="slider_prix"></div>
</form>
jQuery(document).ready(function($){
// Création d'un slider dans l'élément id slider_prix
$("#slider_prix").slider({
range: true,
min: 0, // valeur min
max: 1000, // valeur max
values: [0, 600], // position des 2 curseurs à l'initialisation
// Action à effectuer lorsqu'on déplace l'un des curseur
slide: function(event, ui){
$('#prix_min').html([Link][0]);
$('#prix_max').html([Link][1]);
}
});
// Initialisation des valeurs numériques au chargement de la page
$('#prix_min').html($("#slider_prix").slider("values", 0));
$('#prix_max').html($("#slider_prix").slider("values", 1));
});
3. Drag & drop
Pour créer un drag & drop (glisser-déposer) avec jQuery UI, on utilise des interactions (draggable et
droppable).
Exemple 1 : Déplacer un composant vers n’importe quel endroit en draggant
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Draggable - Default functionality</title>
<link type="text/css" href="themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href="themes/[Link]" rel="stylesheet" />
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
ENI RV p.5
Exemple 2 : [Link]
Retourne l’obget draggable vers sa position initial quand on stoppe le drap avec la variable revert
<html lang="en">
<head>
<title>jQuery UI Draggable - Revert position</title>
<link type="text/css" href=”themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery./[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href="themes/[Link]" rel="stylesheet" />
<style type="text/css">
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
</style>
<script type="text/javascript">
$(function() {
$("#draggable").draggable({ revert: true });
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Revert the original</p>
</div>
</body>
</html>
Drop
Exemple 1 : Activer un element à être droppable, un cible des éléments draggable.
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Droppable - Default Demo</title>
<link type="text/css" href=”themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery./[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href="themes/[Link]" rel="stylesheet" />
<style type="text/css">
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
ENI RV p.6
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
Exemple 3 : Nous pouvons déplacer les éléments qui se trouvent dans le parking, maintenant il faut
s'arranger pour pouvoir faire monter les personnages dans les voitures.
Pour cela, on va utiliser l'interaction droppable sur les voitures. Ça signifie qu'on va pouvoir déposer des
éléments draggable dans les voitures, avec la souris.
Par ailleurs, on va s'arranger pour que l'utilisateur ne puisse pas déplacer un de ces éléments en dehors du
parking, grâce au paramètre containment de l'interaction draggable :
jQuery(document).ready(function($){
$( ".voiture" ).draggable({ containment: 'parent' });
$( ".personnage" ).draggable({ containment: 'parent' });
});
Code HTML :
<div id="parking">
<div id="voiture_bleue" class="voiture"></div>
<div id="voiture_rouge" class="voiture horizontale"></div>
<div id="boby" class="personnage">
<span class="nom">Boby</span>
</div>
<div id="jeanne" class="personnage">
<span class="nom">Jeanne</span>
</div>
</div>
Code Jquery
jQuery(document).ready(function($){
$( ".voiture" ).draggable({ containment: 'parent' });
$( ".personnage" ).draggable({ containment: 'parent' });
$( "#voiture_rouge" ).droppable({
accept: "#jeanne", // Seul le personnage #jeanne peut monter dans la voiture rouge
drop: function( event, ui ) { // Action effectuée lorsqu'on dépose un élément dans la voiture rouge
// [Link] désigne l'élément déplacé, exemple : #jeanne ou #boby
[Link]( $(this) ) // On place le personnage dans la voiture (au niveau du
DOM)
.css({ // Positionnement CSS du personnage au centre de la voiture
left: '65px',
top: '15px'
})
.draggable({ containment: 'parent' }); // Le personnage ne peut plus sortir de la voiture
}
});
// On fait pareil pour la voiture bleue
$( "#voiture_bleue" ).droppable({
accept: "#jeanne, #boby",
drop: function( event, ui ) {
[Link]( $(this) )
.css({
left: '25px',
ENI RV p.7
top: '50px'
})
.draggable({ containment: 'parent' });
}
});
});
En pratique, le drag & drop peut être très utile pour effectuer des opérations via des formulaires (comme
déplacer des mails dans un dossier sur un webmail...).
4. Création des onglets
Exemple 1 : [Link] en cliquant sur un onglet
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Tabs - Default functionality</title>
<link type="text/css" href="themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href=”themes/[Link]" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Drag nd Drop</a></li>
<li><a href="#tabs-2">Sortable</a></li>
</ul>
<div id="tabs-1">
<p>Bloc de texte 1</p>
</div>
<div id="tabs-2">
<p>Bloc de texte 2</p>
</div>
</div>
</body>
</html>
ENI RV p.8
Exemple 2 : [Link] avec event: 'mouseover'
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Tabs - Open on mouseover</title>
<link type="text/css" href="themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href=”themes/[Link]" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
event: 'mouseover'
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Onglet 1</a></li>
<li><a href="#tabs-2">Onglet 2</a></li>
</ul>
<div id="tabs-1">
<p>Bloc de texte 1</p>
</div>
<div id="tabs-2">
<p>Bloc de texte 2</p>
</div>
</div>
</body>
</html>
ENI RV p.9
Exemple 4 : [Link] en Draggant les onglets pour les réarranger.
Rendre sortable les onglets en appliquant la méthode sortable sur la classe . ui-tabs-nav
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Tabs - Sortable</title>
<link type="text/css" href="themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href=”themes/[Link]" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs().find(".ui-tabs-nav").sortable({axis:'x'});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Onglet 1</a></li>
<li><a href="#tabs-2">Onglet 2</a></li>
</ul>
<div id="tabs-1">
<p>Bloc de texte 1</p>
</div>
<div id="tabs-2">
<p>Bloc de texte 2</p>
</div>
</div>
</body>
</html>
6. Barre de progression sur des dates avec JQuery
Progressbar est un plugin JQuery pour afficher une barre de progression. Il prend un pourcentage en entrée
et affiche une barre de progression en sortie. La barre est entièrement personnalisable par CSS.
!doctype html>
<html lang="en">
<head>
<title>jQuery UI Progressbar - Default functionality</title>
<link type="text/css" href="themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src=".jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href="[Link]" rel="stylesheet" />
<script type="text/javascript">
$(function() {
// on peut définir la valeur par défaut de progressbar qui détermine le pourcentage
$("#progressbar").progressbar({
value: 50
ENI RV p.10
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
On peut récuperer la valeur de la Progress Bar
$("#container").mouseover(function() {
//display the current value
$("<p>").attr("id", "percentage").text($("#silder").progressbar("option", "value") + "%
complete").appendTo("body");
});
//set mouseout for progress bar
$("#container").mouseout(function() {
//hide value
$("#percentage").remove();
});
ENI RV p.11
7. BOITE DE DIALOGUE
Boite de dialogue non modal
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Default functionality</title>
<link type="text/css" href="themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>Exemple boite de dialogue non modal</p>
</div>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</body>
</html>
Boite de dialoque modale
!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Basic modal</title>
<link type="text/css" href="themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 140,
ENI RV p.12
modal: true
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic modal dialog">
<p>Exemple boite de dialogue modale</p>
</div>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</body>
</html>
Boite de confirmation
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Modal confirmation</title>
<link type="text/css" href="themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href="[Link]" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
resizable: false,
height:140,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Delete all items in recycle bin': function() {
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
</script>
</head>
<body>
<div id="dialog" title="Empty the recycle bin?">
ENI RV p.13
<p> Exemple de boite de confirmation</p>
</div>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</body>
</html>
Boite de message
!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Modal message</title>
<link type="text/css" href="themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href="[Link]" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
modal: true,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
});
</script>
</head>
<body>
<div id="dialog" title="Download complete">
<p>
Exemple de message modal
</p>
</div>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</body>
ENI RV p.14
</html>
8. Créer un menu déroulant “accordéon” avec jQuery
Un menu "accordéon" est un menu déroulant un peu particulier, dont les sous-menus s'ouvrent au clic de
souris (ou au focus).
Simple accordion
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Accordion - Default functionality</title>
<link type="text/css" href=".themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href="[Link]" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#accordion").accordion();
});
</script>
</head>
<body>
<div class="demo">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Bloc de texte 1
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Bloc de texte 2
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Bloc de texte 3
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Bloc de texte 4
</p>
<p>
Bloc de texte 5
</p>
</div>
ENI RV p.15
</div>
</div><!-- End demo -->
</body>
</html>
Accordion avec mouseover
!doctype html>
<html lang="en">
<head>
<title>jQuery UI Accordion - Open on mouseover</title>
<link type="text/css" href=".themes/base/[Link]" rel="stylesheet" />
<script type="text/javascript" src="jquery/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<script type="text/javascript" src="ui/[Link]"></script>
<link type="text/css" href="[Link]" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
event: "mouseover"
});
});
</script>
</head>
<body>
<div class="demo">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Bloc de texte 1
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Bloc de texte 2
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Bloc de texte 3
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Bloc de texte 4
</p>
<p>
Bloc de texte 5
</p>
ENI RV p.16
</div>
</div>
</div><!-- End demo -->
</body>
</html>
9. DataTable jquery / jquery ui
DataTable est un plugin pour JQuery ([Link]) permettant d'afficher des données
tabulaires (un tableau HTML) sur une page web.
Il permet d'avoir des colonnes triables, une pagination, le défilement, et le redimensionnement des colonnes
, une barre (TableTools) , une zone de recherche et
de copier, imprimer ou d’exporter votre tableau sous format PDF, CSV ou Excel et autres .
PHASE 1 - CONFIGURATION
Pour utiliser DataTables, vous devez tout d'abord inclure, dans le fichier [Link], les bibliothèques
jQuery et DataTables dans l'en-tête de la page html (élément head), ainsi que le fichier de style CSS de
DataTables. Le code ci-après montre les inclusions :
<!doctype html>
<html>
<!-- fichier [Link] -->
<head>
<meta charset="utf-8">
<title>Liste fromages</title>
<script type="text/javascript" src='DataTables/media/js/[Link]'></script>
<script type="text/javascript" src="DataTables/media/js/[Link]"></script>
<script type="text/javascript" src="[Link]"></script>
<link rel="stylesheet" type="text/css" href="DataTables/media/css/[Link]">
</head>
Le tableau html doit contenir l'élément thead, qui définit les titres des colonnes, et
l'élément tbody, comportant les données.
Le code ci-après montre le corps du fichier HTML :
<body>
<table id='tab' class='display'>
<caption>Fromages</caption>
<thead>
<tr><th>Nom</th><th>Lait</th><th>Prix</th></tr>
</thead>
<tbody>
<tr><td>Roquefort</td><td>brebis</td><td>4</td></tr>
<tr><td>Morbier</td><td>vache</td><td>1</td></tr>
<tr><td>Raclette</td><td>vache</td><td>3</td></tr>
...
<tr><td>St Nectaire</td><td>vache</td><td>2</td></tr>
</tbody>
</table>
</body>
</html>
ENI RV p.17
Dans le fichier JavaScript [Link], associez DataTables au tableau dont l'attribut id a la valeur tab :
// fichier [Link]
$(document).ready(function () {
$('#tab').DataTable();
});
La figure 1 montre le résultat obtenu lorsque le fichier [Link] est chargé dans le navigateur.
Fig. 1 : Tableau avec les éléments de contrôle par défaut.
Par défaut, DataTables trie le tableau par ordre croissant sur la première colonne (comme sur la figure 1).
L'utilisateur peut ensuite trier le tableau, par ordre croissant ou décroissant, sur n'importe quelle colonne. Le
tableau de la figure 2 est par exemple trié par ordre de nom décroissant.
Fig. 2 : Tableau trié par ordre décroissant sur la 1ère colonne, avec les éléments de contrôle en français.
PHASE 2 - LANGUE
ENI RV p.18
DataTables affiche le texte des éléments de contrôle en anglais (figure 2), mais il est possible de le
configurer pour utiliser une autre langue, par exemple le français (figure 3).
Pour cela, téléchargez le fichier de la langue souhaitée : [Link] par
exemple, [Link].
Placez le fichier [Link] dans DataTables/media, et affectez le chemin de ce fichier à la
propriété url de la propriété language de DataTables dans le fichier JavaScript :
$(document).ready(function () {
$('#tab').DataTable({
language: {
url: "DataTables/media/[Link]"
}
});
});
PHASE 3 - ÉLÉMENTS DE CONTRÔLE
L'option dom de DataTables permet de définir les éléments de contrôle du tableau qui seront affichés ainsi
que leur ordre dans la page. Le tableau ci-après présente les différents contrôles disponibles pour cette
option.
Contrôle Description
l Affiche le select indiquant le nombre de lignes à afficher par page
f Affiche le champ permettant de filtrer les données du tableau
i Affiche des informations
p Affiche le menu de pagination
T Indique l’emplacement du tableau par rapport aux contrôles
R Affiche un message de traitement
Par défaut la valeur de dom est lftrip (voir figure 3). Il est possible d'utiliser plusieurs fois la même lettre
pour dupliquer un contrôle.
Fig. 3 : Éléments de contrôle.
Le code ci-après affiche la pagination au-dessus du tableau (voir figure 4) :
$(document).ready(function () {
ENI RV p.19
$('#tab').DataTable({
dom: 'ptlf',
language: {
url: "DataTables/media/[Link]"
}
});
});
Fig. 4 : Modification de l'emplacement des éléments de contrôle.
Le champ rechercher restreint l'affichage des lignes du tableau à celles qui contiennent la chaîne saisie
dans ce champ. Le filtrage n'est pas sensible à la différence majuscules/minuscules.
PHASE 4 - PAGINATION
Il est possible de personnaliser la pagination avec l'option pagingType. Quatre types de pagination sont
disponibles : simple,simple_numbers, full, full_numbers (voir figure 5).
Fig. 5 : Différents types de pagination.
• Dans la section de pagination, vous pouvez voir que seuls les boutons Précédent et Suivant sont
affichés, maintenant nous personnalisons notre table pour afficher les boutons Premier Précédent Suivant
Dernier , il suffit de passer un paramètre comme ci-dessous.
Hide Copy Code
< script type = " text / javascript" >
$ ( document ) .ready ( function () {
$ ( ' #tabs' ) .dataTable ({
" pagingType" : " full_numbers" ,
});
});
ENI RV p.20
< / script >
Le menu qui définit le nombre de lignes affichées par page est configuré avec l'option lengthMenu. Par
défaut, DataTables propose un menu comportant : 10, 25, 50, 100 (voir figure 3). Le nombre de lignes à
afficher au chargement du tableau est contrôlé par l'option pageLength.
Le code ci-après, affiche 3 lignes par page, et permet de basculer l'affichage à 5, 10, 15, 20 ou 25 lignes par
page (voir figure 6).
pagingType: "simple_numbers",
lengthMenu:[5,10,15,20,25],
pageLength: 3
Fig. 6 : Personnalisation de la pagination.
PHASE 5 - TRI
Par défaut, le tri est réalisé sur la première colonne, par ordre croissant (voir figure 1). La
propriété order indique les colonnes à utiliser pour le tri et l'ordre à leur appliquer : croissant (asc) ou
décroissant (desc). Dans le code ci-après, le tri est réalisé sur la deuxième colonne par ordre décroissant,
puis sur la première colonne
par ordre croissant (voir figure 7a).
order:[[1,'desc'], [0, 'asc']]
L'option columns, permet de définir le type de la colonne (alphabétique, numérique, … ). L'exemple ci-
après, indique que les deux premières colonnes sont
de type texte et que la troisième est de type numérique. Le type de la colonne sera pris en compte pour le
tri.
columns: [ {type:"text"}, {type:"text"}, {type:"num"} ]
Une cellule peut contenir des éléments html comme dans l'exemple de code ci-après :
<td><em>buffle</em></td>
Alors, au moment du tri, les balises <em></em> seront considérées comme du texte, le tri sera différent de
celui attendu par l'utilisateur.
Dans la figure 7b, buffle est situé sur la dernière ligne du tableau, lorsque le tri est réalisé par ordre
décroissant, car le caractère < a une valeur inférieure aux caractères de l'alphabet.
ENI RV p.21
Pour ignorer les éléments HTML et obtenir le tri souhaité lors de la comparaison (voir figure 7a), il faut
donner à la colonne le type html :
columns: [ {type:"text"}, {type:"html"}, {type:"num"} ]
Fig. 7 : Option de tri.
Il est possible d'exclure une ou plusieurs colonnes du tri avec la propriété orderable :
columns: [ {type:"text"}, {type:"html"}, {orderable:false} ]
PHASE 6 - STYLE
Le style du tableau est contrôlé par une ou plusieurs classes de style prédéfinies (voir tableau ci-après),
placées dans l'attribut class de l'élément table :
<table id='tab' class='display compact cell-border'>
Classe de Description
style
Encadre les cellules
Encadre les lignes
Alterne les couleurs de fond des lignes
Change la couleur de fond de la ligne survolée par la souris
Change la couleur de fond des colonnes utilisées pour trier le tableau
Raccourci pour stripe, hover, row-border, order-column
Désactive le passage à la ligne dans une cellule, le texte de la cellule est placé sur une
seule ligne
Diminue les espaces dans les cellules
DataTables supporte les thèmes bootstrap et jQuery UI.
RÉSULTAT
La figure 8 montre le résultat obtenu une fois toutes les étapes réalisées.
$(document).ready(function () {
$('#tab').DataTable({
language: {
url: "DataTables/media/[Link]"
},
dom: "tip",
pagingType: "simple",
pageLength: 8,
order: [[1, 'desc'], [0, 'asc']],
ENI RV p.22
columns: [
{type: "text"},
{type: "html"},
{orderable: false}
]
});
});
Le tableau a un style display, compact et cell-border. Les couleurs ont été personnalisées avec le
créateur de thème. Les éléments de contrôle présents sont les informations et la pagination de type simple,
et ils sont traduits en français. La dernière colonne ne peut pas être triée.
Fig. 10 : Résultat final.
• Si vous n'avez pas besoin de fonctionnalités telles que la recherche, le tri ou la pagination, vous
pouvez également les désactiver en passant des paramètres spécifiques.
Hide Copy Code
<script type="text/javascript">
$(document).ready(function () {
$('#tab).dataTable({
"paging" : false,
"ordering" : false,
"info" : false,
"searching" : false
});
});
</script>
