Angular et jQuery DataTables

Catégories : Expertise TechniquePar Ignacio NavarroTags: Angular, jQuery

SOMMAIRE

Envie d’aller plus loin ? Échangez directement avec l’un de nos experts.

Introduction

Il est fréquent de devoir afficher une grande quantité de données dans nos applications web et, pour bien organiser cette information, on utilise des tableaux HTML. Avec Angular, il est très facile de remplir les lignes du tableau en utilisant des directives de type boucle, comme *ngFor, dans nos templates HTML.

Néanmoins, la complexité arrive quand nous devons ajouter des fonctionnalités à notre tableau comme la pagination, les tris, la recherche ou le téléchargement des données via Ajax. Il est vivement recommandé d’ajouter ces fonctionnalités dès que le nombre de lignes de nos tableaux dépasse une certaine limite, au-delà de quelques dizaines. Sans celles-ci, on risque de créer des écrans trop lourds pour nos utilisateurs, voire même, de surcharger la mémoire du browser et de le bloquer pendant les actions de chargement et d’affichage de ce tableau.

Pour mettre en place ces fonctionnalités, plutôt que de les coder ‘from scratch’ dans notre application, il vaut mieux utiliser des composants existants.

Dans cet article on va parler d’un de ces composants : Angular DataTables . Ce plug-in est construit sur le plug-in DataTables pour jQuery. Pour ceux qui sont déjà habitués à utiliser ce plugin avec jQuery, il est désormais possible d’utiliser ces mêmes fonctionnalités avec toute la puissance d’Angular pour créer du contenu HTML à partir de templates.

Installation

Pour utiliser le plug-in Angular DataTables, il faudra installer le package angular-datatables dans notre application Angular.

Comme d’habitude, on utilisera Node.js et la ligne de commandes Angular CLI « add angular-datables » pour gérer les dépendances de notre application (pour l’installer voir https://angular.io/cli).

Si on travaille avec le SDK Visual Studio Code, on peut lancer les commandes d’Angular CLI depuis l’integrated TERMINAL :

Après l’exécution de cette commande, notre application aura été mise à jour avec toutes les dépendances dont le plug-in DataTables a besoin. En particulier, le framework jQuery. On peut le vérifier dans le fichier package.json de notre application :

Ensuite, il faut importer le module du package datatables dans le module de notre application qui va l’utiliser. Pour ceci, on édite le fichier de la classe principale de notre module :

Usage

Pour utiliser ce plug-in avec nos tableaux, il suffit d’ajouter la directive datatable à l’élément HTML table déclaré dans le template du composant.

Voici un exemple d’un cas simple d’utilisation, dans lequel les données du tableau sont directement renseignées dans le template HTML de notre composant :

Copy to Clipboard

<table datatable class="row-border">
	<thead>
		<tr>
			<th>Nom</th>
			<th>Adresse</th>
			<th>Ville</th>
			<th>Age</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Arnaud LEMAIRE</td>
			<td>50 Rue Barye</td>
			<td>Paris</td>
			<td>50</td>
		</tr>
		<tr>
			<td>David BARBIER</td>
			<td>1 Rue Barye</td>
			<td>Poitiers</td>
			<td>15</td>
		</tr>
		<tr>
			<td>Gillet ROYER</td>
			<td>5 Rue Barye</td>
			<td>Caen</td>	
			<td>62</td>	
		</tr>		
		<tr>
			<td>Christine KLEIN</td>
			<td>18 Rue Barye</td>
			<td>Nantes</td>
			<td>30</td>
		</tr>
		<tr>
			<td>Anne BOUVIER</td>
			<td>5 Rue Barye</td>
			<td>Rouen</td>
			<td>46</td>
		</tr>
		<tr>
			<td>Pierre COUSIN</td>
			<td>23 Rue Barye</td>
			<td>Bordeaux</td>
			<td>37</td>
		</tr>
		<tr>
			<td>Louis LAPORTE</td>
			<td>77 Rue Barye</td>
			<td>Lille</td>
			<td>12</td>
		</tr>
		<tr>
			<td>David ROUSSEL</td>
			<td>6 Rue Barye</td>
			<td>Marseille</td>
			<td>56</td>
		</tr>
		<tr>
			<td>André GAUTIER</td>
			<td>15 Rue Barye</td>
			<td>Paris</td>
			<td>81</td>
		</tr>
		<tr>
			<td>Antoine MASSON</td>
			<td>36 Rue Barye</td>
			<td>Belleville</td>
			<td>19</td>
		</tr>
		<tr>
			<td>Pierre BOYER</td>
			<td>1 Rue Barye</td>
			<td>Lyon</td>
			<td>25</td>
		</tr>
		<tr>
			<td>Daniel LAMY</td>
			<td>2 Rue Barye</td>
			<td>Paris</td>
			<td>49</td>
		</tr>
	</tbody>
</table>

Copy to Clipboard

CONTROLLEUR

Copy to Clipboard

[ApiController]
public class PersonsController : ControllerBase
{
	private static readonly Person[] Persons = new Person[]
	{
		new Person() {Id = 0, Name="Arnaud LEMAIRE", Address="50 Rue Barye", City="Paris", Age=50},
		new Person() {Id = 1, Name="David BARBIER", Address="1 Rue Gambetta", City="Poitiers", Age=44},
		new Person() {Id = 2, Name="Gillet ROYER", Address="5 Rue Paix", City="Caen", Age=50 },
		new Person() {Id = 3, Name="Christine KLEIN", Address="11 Rue Opera", City="Nantes", Age=78},
		new Person() {Id = 4, Name="Anne BOUVIER", Address="6 Rue Art", City="Marseille", Age=50},
		new Person() {Id = 5, Name="Pierre COUSIN", Address="8 Rue Vincent", City="Nice", Age=12},
		new Person() {Id = 6, Name="Louis LAPORTE", Address="50 Rue Bercy", City="Lyon", Age=36},
		new Person() {Id = 7, Name="David ROUSSEL", Address="88 Rue Philip", City="Paris", Age=89 },
		new Person() {Id = 8, Name="André GAUTIER", Address="45 Rue Sevres", City="Paris", Age=17},
		new Person() {Id = 9, Name="Antoine MASSON", Address="32 Rue Monceau", City="Lille", Age=26},
		new Person() {Id = 10, Name="Pierre BOYER", Address="1 Rue Villiers", City="Caen", Age=32},
		new Person() {Id = 10, Name="Daniel LAMY", Address="12 Rue Nation", City="Brest", Age=54},
	};
	[HttpGet]
	[Route("api/[controller]/get-all")]
	public IActionResult GetAll()
	{
		var result = new { Data = Persons };
		return Ok(result);
	}
	[HttpPost]
  	[Route("api/[controller]/pagination-request")]
	public IActionResult PostPaginationRequest([FromForm]RequestDataTable requestDataTable)
	{
		string searchString = requestDataTable.StringSearch?.ToLower();
		var query = Persons.Where(p => String.IsNullOrWhiteSpace(searchString) || p.Name.ToLower().Contains(searchString.ToLower()));
		int totalCount = Persons.Length;
		int filteredCount = query.Count();
		var data = query.Skip(requestDataTable.Start).Take(requestDataTable.Length).ToArray();
		var response = new ResponseDataTable
		{
			Draw = requestDataTable.Draw,
			RecordsTotal = totalCount,
			RecordsFiltered = filteredCount,
			Data = data
		};
		return Ok(response);
	}
	[HttpPost]
  	[Route("api/[controller]/custom-pagination-request")]
	public IActionResult PostCustomPaginationRequest([FromBody] CustomRequestDataTable requestDataTable)
	{
		string searchString = requestDataTable.Search.Value?.ToLower();
		var query = Persons.Where(p => String.IsNullOrWhiteSpace(searchString) || p.Name.ToLower().Contains(searchString.ToLower()));
		int totalCount = Persons.Length;
		int filteredCount = query.Count();
		var data = query.Skip(requestDataTable.Start).Take(requestDataTable.Length).ToArray();
		var response = new ResponseDataTable
		{
			Draw = requestDataTable.Draw,
			RecordsTotal = totalCount,
			RecordsFiltered = filteredCount,
			Data = data
		};
		return Ok(response);
	}
}

Ne ratez plus aucune actualité avec la newsletter mensuelle de SoftFluent