DataTables 1.10.x - Contextmenu (delete, edit) row et filtre sur cellule

Introduction

Dans un tableau Datatables avec des données dynamiques exécuté avec PDO, que l'on utilise dans un espace d'administration, on a souvent en fin de tableau une colonne que l'on nomme "Action".

Bien souvent on y retrouve des icônes pour l'édition, la suppression et bien d'autres.

Pour ce cas ci, je vous propose un tableau datatables, sans cette colonne, mais avec un menu contextuel qui apparait avec un clic droit sur le choix d'une cellule.
Ce menu (comme vous pouvez le voir sur l'image) se compose de 4 items, (Filtrage, Supprimer le filtrage, Edition, Suppression).

Je le redit, et vous savez ou vous devez savoir que dans une boucle on ne peut pas générer des id identiques, contrairement au class.

Avec ce menu Contextuel on gagne en largeur de tableau, du fait qu'il y ait une colonne de moins. Cependant, cela oblige d'avoir un code JavaScript un peu plus conséquent.
De plus il est multi thème, puisqu'il le thème JQuery UI que vous utiliserez pour le tableau Datatables.


Que fait ce menu ?
Un clic sur une cellule (sauf la colonne 0) permet d'effectuer un filtrage.
La cellule se colore en rouge indiquant la cellule choisie et permet d'afficher le tableau en conséquence, un autre clic sur cette cellule, permet de supprimer ce filtrage, et de retrouver le tableau avec toutes les données.
Je précise que les données sont issues d'une base de données, et utilise PDO.

Ensuite un clic sur Edition mais que sur la colonne 0 soit la colonne ID, permet de récupérer ce texte pour l'affecter au paramètre GET du lien correspondant à l'item Edition, pour être redirigé vers cette page contenant un formulaire d'édition.
La même chose doit être effectué pour la suppression d'un enregistrement.
Toutefois, si une autre colonne était choisie pour l'édition ou la suppression, une boite d'alerte affiche un message qu'il n'est pas possible d'effectuer une édition ou suppression sur ces colonnes.
Dans un tableau Datatables, les colonnes du tableau commence à 0, soit le tableau ci-dessous (0 à 6) et égal à 7 colonnes.

Les cellules ne sont pas limitées en nombre.

contextmenu

Choix du menu contextuel

Le choix du menu contextuel utilisé dans la DEMO et celui de JQUERY et dieu sait qu'il existe plusieurs sorte de script de menu contextuel.

De plus on peut utiliser les icônes JQuery. On peut créer le menu dans le DOM ou dans le BODY.
Toutefois, la structure du menu dans le DOM n'est pas comparable à celui portant l'id (options) (voir code source demo).
Voici un lien de référence que j'ai utilisé (https://libraries.io/github/JQueryCollection/jquery-ui-contextmenu).
A savoir que la page de demo ne fait appel qu'à des fichiers en CDN.

Code Javascript

Pour la mise en place de tout ceci, veuillez consulter le code source de la page de la DEMO..

Bien entendu, dans ce code source vous ne verrez pas le code php/pdo, mais le code JavaScript et css utilisé, ainsi que du script en commentaire.


Bon dev.