DataTables 1.10.x - Bootstrap Edition cellule Datetime Picker

Introduction

Voici un tableau Datatables avec des données dynamiques exécuté avec PDO.

Ce tableau utilise Bootstrap V 3 et le plugin DataTables en version 1.10.11.

Pour l'édition le tableau utilise le fichier (bootstrap-editable.js) que j'ai renommé en (bootstrap-editable-class.js). Pourquoi ?
Car ce fichier je l'ai modifié afin qu'il prenne en compte non pas les id du lien mais la class.

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.

D'ailleurs, je ne comprend pas son concepteur, qu'il n'est pas pris en compte cet état de fait, que vous utilisiez jquery editable ou boostrap editable, c'est la même chose.


Ensuite, vous pouvez remarquer que la colonne (Nom) et la colonne (Date) ont une apparence similaire.
Ces deux colonnes sont éditables via le mode Popup. D'ailleurs vous pouvez consulter la démo, afin de voir le fonctionnement.

Seul les fichiers de DataTables sont appelés via CDN, le reste des fichiers sont locaux.
L'édition de ces cellules permettent de rester sur la même page lors de la modification des valeurs.

Les cellules ne sont pas limitées en nombre.

bootstrap modal

Code Html

A présent, voyons comment définir les liens des données éditables.

<td><a href="#" data-pk="<?php echo $datas['id']; ?>" class="pseudo"><?php echo $datas['pseudo']; ?></a></td>

Lorsque vous souhaitez qu'une des cellules de votre tableau soit éditable, vous devez procéder comme ci-dessus.
A savoir que le lien ne contient que le caractère dièse, que l'attribut (data-pk) fait référence à l'id de la table, que la valeur de la class fait référence au nom du champ de votre table MySQL (obligatoire), car cette valeur va servir à la requête SQL SET dont cette valeur sera dynamique dans cette requête.

Code Javascript

Ci-dessous, deux exemplaires de codes dont un pour des chaînes de caractéres (string) et le second pour la date format Datetime.

// editable
  $('#menuTable a.pseudo').editable({
  type: 'text',
  url: 'bootstrap/modif_ajax.php',
  placement: 'top',
  title: 'pseudo'
});

$('#menuTable a.date_inscription').editable({
  type: 'datetime',
  url: 'bootstrap/modif_ajax.php',
  placement: 'right',
  format: 'yyyy-mm-dd hh:ii:ss',
  title: 'date'
});

Bien entendu, il va de soit que ce code fasse partie du document ready et où à la suite du code de Datatables.
Vous n'êtes pas obligé d'utiliser le plugin DataTables, vous pouvez utiliser simplement un tableau classique mise en forme en css.

Code (modif_ajax.php)

Dans ce code il faudra juste modifier le nom de la table et l'id de la clause WHERE et, créer une connexion PDO.

<?php
  require_once('../pdo.php');
  if(isset($_POST['name'])){
  $column=$_POST['name'];
  $new_value=$_POST['value'];
  $id=$_POST['pk'];

try
{
$update = $PDO->prepare("UPDATE free_membre SET $column='$new_value' WHERE id_membre='$id'");
$update->execute(); 
}
catch(PDOException $e) {
$msg = 'ERREUR PDO dans ' . $e->getFile() . ' L.' . $e->getLine() . ' : ' . $e->getMessage();
die($msg);
}
echo $id;
echo '<br>';
echo $new_value;
echo '<br>';
echo $column;
}
?>

C'est la variable ($column) ou ($column=$_POST['name'];) qui fait référence à l'attribut (class) du lien, soit le nom de votre champ de votre table MySQL.

Vous trouverez ci-joint une archive contenant les fichiers principaux et notamment le fichier modifié.
Reste à concevoir votre page, avec votre requêtes, de créer votre tableau avec le plugin DataTables ou pas.

télécharger l'archive pour votre projet * Téléchargé ( 6  fois)



Bon dev.