Explorer un tableau de données avec DataTables

2019-04-27

Package DT pour R

https://rstudio.github.io/DT/

https://rstudio.github.io/DT/004-i18n.html

	<!doctype html>
	<html class="no-js" lang="">

	<head>
	<meta charset="utf-8">
	<title>Explorer un tableau de données avec DataTables</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="population.js"></script>
	</head>

	<body>
	<div style="width:70%;margin:30px auto;">
	<table id="example" class="display" width="100%"></table>
	</div>
	</body>
	</html>

view raw HTML hosted with ❤ by GitHub

	var dataSet = [
	["Ain","653688"],
	["Aisne","528016"],
	["Allier","333065"],
	["Alpes-de-Haute-Provence","161980"],
	["Hautes-Alpes","141784"],
	["Alpes-Maritimes","1080899"],
	["Ardèche","327011"],
	["Ardennes","267409"],
	["Ariège","152340"],
	["Aube","309117"],
	["Aude","368011"],
	["Aveyron","277900"],
	["Bouches-du-Rhône","2035410"],
	["Calvados","691676"],
	["Cantal","143627"],
	["Charente","350240"],
	["Charente-Maritime","646016"],
	["Cher","300174"],
	["Corrèze","240973"],
	["Corse-du-Sud","158800"],
	["Haute-Corse","180378"],
	["Côte-d'Or","532901"],
	["Côtes-d'Armor","596518"],
	["Creuse","117340"],
	["Dordogne","409548"],
	["Doubs","539465"],
	["Drôme","517414"],
	["Eure","606419"],
	["Eure-et-Loir","431437"],
	["Finistère","905238"],
	["Gard","745756"],
	["Haute-Garonne","1390496"],
	["Gers","189326"],
	["Gironde","1620243"],
	["Hérault","1165412"],
	["Ille-et-Vilaine","1076330"],
	["Indre","217312"],
	["Indre-et-Loire","608387"],
	["Isère","1262108"],
	["Jura","258624"],
	["Landes","409325"],
	["Loir-et-Cher","330727"],
	["Loire","762222"],
	["Haute-Loire","226835"],
	["Loire-Atlantique","1425592"],
	["Loiret","678722"],
	["Lot","171770"],
	["Lot-et-Garonne","330159"],
	["Lozère","75700"],
	["Maine-et-Loire","815325"],
	["Manche","492627"],
	["Marne","567225"],
	["Haute-Marne","173041"],
	["Mayenne","305021"],
	["Meurthe-et-Moselle","731753"],
	["Meuse","184474"],
	["Morbihan","751309"],
	["Moselle","1036153"],
	["Nièvre","201518"],
	["Nord","2592185"],
	["Oise","825207"],
	["Orne","279755"],
	["Pas-de-Calais","1463196"],
	["Puy-de-Dôme","656643"],
	["Pyrénées-Atlantiques","679354"],
	["Hautes-Pyrénées","225219"],
	["Pyrénées-Orientales","481691"],
	["Bas-Rhin","1126505"],
	["Haut-Rhin","761480"],
	["Rhône","1882339"],
	["Haute-Saône","233394"],
	["Saône-et-Loire","549763"],
	["Sarthe","561583"],
	["Savoie","432716"],
	["Haute-Savoie","829017"],
	["Paris","2140526"],
	["Seine-Maritime","1248590"],
	["Seine-et-Marne","1421735"],
	["Yvelines","1436581"],
	["Deux-Sèvres","374873"],
	["Somme","569662"],
	["Tarn","387638"],
	["Tarn-et-Garonne","261558"],
	["Var","1075649"],
	["Vaucluse","563751"],
	["Vendée","679024"],
	["Vienne","437368"],
	["Haute-Vienne","371575"],
	["Vosges","361031"],
	["Yonne","336532"],
	["Territoire de Belfort","143104"],
	["Essonne","1314827"],
	["Hauts-de-Seine","1606088"],
	["Seine-Saint-Denis","1654477"],
	["Val-de-Marne","1395209"],
	["Val-d'Oise","1243921"]
	];
	$(document).ready(function() {
	$('#example').DataTable( {
	data: dataSet,
	columns: [
	{ title: "Département" },
	{ title: "Population" }
	],
	language: {
	processing: "Traitement en cours...",
	search: "Rechercher :",
	lengthMenu: "Afficher _MENU_ éléments",
	info: "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
	infoEmpty: "Affichage de l'élement 0 à 0 sur 0 éléments",
	infoFiltered: "(filtré de _MAX_ éléments au total)",
	infoPostFix: "",
	loadingRecords: "Chargement en cours...",
	zeroRecords: "Aucun élément à afficher",
	emptyTable: "Aucune donnée disponible dans le tableau",
	paginate: {
	first: "Premier",
	previous: "Précédent",
	next: "Suivant",
	last: "Dernier"
	},
	aria: {
	sortAscending: ": activer pour trier la colonne par ordre croissant",
	sortDescending: ": activer pour trier la colonne par ordre décroissant"
	}
	}
	});
	} );

view raw data.js hosted with ❤ by GitHub

Voir la démo
Télécharger le fichier JS
Documentation : https://datatables.net/manual/