[AJAX] Manipulation tableau html

Version imprimable

29/12/2014, 13h40
lingenieur

3 pièce(s) jointe(s)

[AJAX] Manipulation tableau html

Je travail sur une application, mais le problème c'est que je suis débutant en javascript (Jquery, Ajax).
Je fais ce post en espérant qu'ensemble nous pourrons relever ce défi. Je compte sur votre aide car je ne sais par ou commencer

1-La page présente en premier lieu la liste des services
Pièce jointe 164939

2- Lorsqu'on clique sur Ajouter, on a la liste des employer du service
Pièce jointe 164940

Lorsqu'on click sur Supprimer qui est en face de service il déplace le service dans la liste des services plus haut et faire disparaitre les employes de ce service.
Lorsqu'on Click sur Ajouter qui est devant service, Il ajoute tous les employés du service au tableau Liste de diffusion
Lorsqu'on click sur Ajouter qui est devant la liste des employés, ces employés selectionner sont déplacés dans le tableau Liste de diffusion

3-Au lieu de Ajouter, c'est Supprimer
Pièce jointe 164944

Lorsqu'on clique sur Supprimer, cet employé est déplacer dans le tableau Liste des employés par service.
Lorsqu'on Click sur Envoyer, il récupère tous les employés présent dans la table Liste de diffusion, les enregistre dans la table assigner et leur envoie un mail (Notification), Ceux qui n'ont pas pu être traités demeurent dans le tableau, jusqu'à ce qu'ils soient traités.

Ceux qui ont été traités ne sont plus dans le tableaux, de sorte à ceux qu'on puissent savoir ceux qui ont été enregistrés et notifiés.

Lorsque toutes les données on été traitées, le tableau se vide et un message de réussite est afficher (10 secondes).

En clair c'est le travail qui m'a été assigner.

Merci de m'aider.
29/12/2014, 14h29
vandenn3

Salut,

Je te conseillerais de commencer à réfléchir à la structure de l'application: les différentes listes à afficher dans le html, les fonctions javascript qu'il faudra écrire pour chaque action,...
Il faut dégrossir le projet en petites parties.

Ton appli dois utiliser une base de donnée ?
29/12/2014, 15h49
lingenieur

je travail avec Mysql
29/12/2014, 15h54
vandenn3

D'accord, pourquoi ne pas commencer par créer les tables dans la base de donnée et les remplir?

Enfin, peut être que tu a déja fait certaines choses.. a-tu des questions précises ?
29/12/2014, 16h37
lingenieur

Au fait, j'ai déjà la liste des service, mon problème c'est comment faire la liste des employés du service lorque je click sur Ajouter
tout ceci en ajax

Si la liste des employés est dans ta base de donnée, tu peux par exemple faire une requête de type GET vers une page php/asp pouvant communiquer avec la bdd:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function clickOnService(idService) {
    var ajax = new XMLHttpRequest(); //on instancie un nouvel objet ajax
    ajax.onreadystatechange = function() { //fonction appelée à chaque changement du statut de la requète
        if (ajax.readyState == 4 && ajax.status == 200) { //vérifie si la requète est terminée et avec succès (on a reçu les données)
            var reponse = JSON.parse(ajax.responseText); //->si la réponse est au format JSON, reponse sera un objet javascript
            //traitement des données reçues ici, par exemple remplir un tableau html
        }
    };
    ajax.open('GET', 'mapage.php?requete=demander_liste_employes&idservice='+idService, true); //paramétrer la requète ajax: envoie une requète de type GET, asynchrone
    ajax.send(null); //envoie la requète
 
}

29/12/2014, 17h53
lingenieur

visionne la deuxième image que j'ai posté pour voir si ton script peut faire pareil.
Aussi, oui les employés sont dans une base de données Mysql
Merci

Oui il peut faire pareil. ce que j'ai posté est un morceau du script, il faut compléter à l’endroit ou on a reçu les données (voir le commentaire): insérer des lignes dans un tableau html.

par exemple si tu a:
Code:

1 2 3 4 5 6 7 8 <table id='tableau_employers'> <tr> <td>élément 1</td> <td>élément 2</td> <td>élément 3</td> </tr> </table>
en javascript tu peux ajouter une ligne à ce tableau:
Code:

1 2 3 4 5 6 var contenu = ["texte1", "texte2", "texte3"]; //les données var newTR = document.createElement("tr"); //je crée l'élément newTR.innerHTML = "<td>"+contenu[0]+"</td> <td>"+contenu[1]+"</td> <td>"+contenu[2]+"</td>"; //je défini son contenu document.getElementById("tableau_employers").appendChild(newTR); //je l'ajoute au tableau
vois tu comment combiner le code ajax et celui-ci pour afficher la liste des membres d'un service?

29/12/2014, 18h19
lingenieur

Je n'arrive pas à agencer l'Ajax au Javascript, il est bon de noter que tout se passe dans la même page.

Si je peux avoir le script complet cela m'aiderait beaucoups

voila les codes rassemblés:

Code:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<html>
<head>
<title>test</title>
</head>
<body>
 
  <table id='tableau_employers'>
    <tr data-identifiant_service='1'>
      <td>élément 1</td>
      <td>élément 2</td>
      <td>élément 3</td>
    </tr>
    <tr data-identifiant_service='2'>
      <td>élément 1</td>
      <td>élément 2</td>
      <td>élément 3</td>
    </tr>
  </table>
  <script src='http://code.jquery.com/jquery-1.11.2.min.js'></script> <!-- j'utilise la bibliothèque jquery pour les évènements; on peux faire sans mais c'est plus rapide -->
  <script>
    function clickOnService(idService) {
      var ajax = new XMLHttpRequest(); //on instancie un nouvel objet ajax
      ajax.onreadystatechange = function() { //fonction appelée à chaque changement du statut de la requète
          if (ajax.readyState == 4 && ajax.status == 200) { //vérifie si la requète est terminée et avec succès (on a reçu les données)
              var reponse = JSON.parse(ajax.responseText); //->si la réponse est au format JSON, reponse sera un objet javascript
              //traitement des données reçues ici, par exemple remplir un tableau html:
 
              for(var i=0,newTR,len=reponse.length;i<len;i++) { //je parcours un éventuel tableau de données, cela dépend comment tu compte afficher les données sur la page php/asp (pour php, regarde la fonction json_encode() )
                  newTR = document.createElement("tr"); //je crée l'élément
                  newTR.innerHTML = "<td>"+contenu[i][0]+"</td> <td>"+contenu[i][1]+"</td> <td>"+contenu[i][2]+"</td>"; //je défini son contenu
                  document.getElementById("tableau_employers").appendChild(newTR); //je l'ajoute au tableau
 
              }
 
          }
      };
      ajax.open('GET', 'mapage.php?requete=demander_liste_employes&idservice='+idService, true); //paramétrer la requète ajax: envoie une requète de type GET, asynchrone
      ajax.send(null); //envoie la requète
    }
 
    //évènement click sur chaque TR du tableau des services
    $("table#tableau_employers tr").click(function(){
        clickOnService(parseInt($(this).attr("data-identifiant_service")));
    });
  </script>
</body>
</html>

voila, mais je ne vais pas écrire tout ton programme non plus ;)

29/12/2014, 19h12
lingenieur

je teste et te reviens sous peu

voici comment je récupère la liste des services

Code:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<div style="margin-top:10px">
				<div class="row">
					<div class="col-md-12">
						<div class="widget box">
							<div class="widget-header">
								<h4><i class="icon-reorder"></i> Liste du personnel</h4>
								<div class="toolbar no-padding">
									<div class="btn-group">
										<span class="btn btn-xs widget-collapse"><i class="icon-angle-down"></i></span>
									</div>
								</div>
							</div>
							<div class="widget-content no-padding">
								<table class="table table-striped table-bordered table-hover table-checkable datatable" data-horizontal-width="195%">
									<thead>
										<tr>
											<th class="checkbox-column">
												<input type="checkbox" class="uniform">
											</th>
											<th>Id</th>
											<th>Libelle</th>
 
											<th>Actions</th>
										</tr>
									</thead>
									<tbody>
									         <?php
                                                                 $objs_service= new Services();
                                                     $liste_service=$objs_service->getlist();
                                                 while($rsr=$liste_service->fetchObject()){
                                             ?>
										<tr>
											<td class="checkbox-column">
												<input type="checkbox" class="uniform">
											</td>
											<td><?php echo $rsr->idservice ?></td>
											<td><?php echo $rsr->libelleservice ?></td>
 
											<td><span class="label label-success"><a href="test.php?idservice=<?php echo $rsr->idservice ?>">Ajouter</a></span></td>
										</tr>
										<?php
                                                                                }
                                                                                ?>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				</div>

il fonctionne correctement.

lorque j'y ajoute ton code ça ne fonctionne pas, j'ai manqué quelque chose

Code:

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
31
32
33
34
35
36
37
38
39
40
<div style="margin-top:20px">
				 <table id='tableau_employers'>
    <tr data-identifiant_service='1'>
      <td>élément 1</td>
      <td>élément 2</td>
      <td>élément 3</td>
    </tr>
    <tr data-identifiant_service='2'>
      <td>élément 1</td>
      <td>élément 2</td>
      <td>élément 3</td>
    </tr>
  </table>
  <script src='http://code.jquery.com/jquery-1.11.2.min.js'></script> <!-- j'utilise la bibliothèque jquery pour les évènements; on peux faire sans mais c'est plus rapide -->
  <script>
    function clickOnService(idService) {
      var ajax = new XMLHttpRequest(); //on instancie un nouvel objet ajax
      ajax.onreadystatechange = function() { //fonction appelée à chaque changement du statut de la requète
          if (ajax.readyState == 4 && ajax.status == 200) { //vérifie si la requète est terminée et avec succès (on a reçu les données)
              var reponse = JSON.parse(ajax.responseText); //->si la réponse est au format JSON, reponse sera un objet javascript
              //traitement des données reçues ici, par exemple remplir un tableau html:
 
              for(var i=0,newTR,len=reponse.length;i<len;i++) { //je parcours un éventuel tableau de données, cela dépend comment tu compte afficher les données sur la page php/asp (pour php, regarde la fonction json_encode() )
                  newTR = document.createElement("tr"); //je crée l'élément
                  newTR.innerHTML = "<td>"+contenu[i][0]+"</td> <td>"+contenu[i][1]+"</td> <td>"+contenu[i][2]+"</td>"; //je défini son contenu
                  document.getElementById("tableau_employers").appendChild(newTR); //je l'ajoute au tableau
 
              }
 
          }
      };
      ajax.open('GET', 'test.php?idservice='+idService, true); //paramétrer la requète ajax: envoie une requète de type GET, asynchrone
      ajax.send(null); //envoie la requète
    }
 
    //évènement click sur chaque TR du tableau des services
    $("table#tableau_employers tr").click(function(){
        clickOnService(parseInt($(this).attr("data-identifiant_service")));
    });
  </script>

Je pense que le problème se trouve au niveau de la recuperation des données dans la table employé.

Merci

29/12/2014, 20h06
vandenn3

Le code que j'ai écris effectue une action lorsque l'on clic sur Ajouter. Or Ajouter est ici un lien et te redirige vers une page. (qui pourrait d'ailleurs afficher le tableau des employés)

Mais faire ce que tu veux peut aussi s'effectuer avec un lien; dans ce cas pas besoin d'ajax...
Il suffit que ta page test.php affiche la liste des employés, à partir de l'id du service.
29/12/2014, 20h38
lingenieur

merci, je fais comme ça