Discussion :

[rolls]

Bonjour,
j'utilise php,ajax, html et bootstrap pour réaliser une application CRUD.
J'arrive à afficher(dans un tableau), ajouter, modifier et supprimer les données de la base de données.
Le seul souci que j'ai c'est comment rafraichir le contenu du tableau après un ajout, une modification ou une suppression d'un élément.
D'avance merci!
Voici mon code :

Fichier index.php
code permettant l'affichage des données dans un tableau

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="panel-body">
                    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-list" >
                        <thead>
                            <tr>
                                <th style="width:8%">ID</th>
                                <th style="width:30%" title="Date de la remise">Libellé</th>
                                <th style="width:52%">Description</th>
                                <th style="width:10%">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="dataBody" >      
 
                        </tbody>
                    </table>
 
                </div>

code ajax pour l'affichage des données:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script type="text/javascript" >	
	$(document).ready(function() {			
			getExistingData(0,50);	// chargement des données lors du chargement de la page		
        });
 
	function getExistingData(start, limit){		
 
		$.ajax({
			url: 'template/ajaxController.php',
			method: 'POST',
			dataType: 'text',
			data: {
				key:'getExistingData',
				start: start,
				limit:limit
			}, success: function(response){
 
				if(response != 0){
					 $("#dataBody").append(response);
					 start +=limit;
					 getExistingData(start, limit);							  
				} else{ 
				   $('#dataTables-list').DataTable({
						responsive: true							
					});
				}
			}
		});
 
	}
</script>

Fichier ajaxController.php : connexion à la base de données et extraction des données

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
if($_POST['key']=='getExistingData'){
    $start=mysqli_real_escape_string($myConnexion,$_POST['start']);
    $limit=mysqli_real_escape_string($myConnexion,$_POST['limit']);  
 
    $query ='SELECT id,libelle,description FROM tsl LIMIT '.$start.','.$limit.'';
    $result =mysqli_query($myConnexion,$query); 
    if(mysqli_num_rows($result)>0){
        $response="";
        while($data = mysqli_fetch_array($result,MYSQLI_ASSOC)){
            $response.='
                <tr class="gradeC" >
                    <td id="line_'.$data["id"].'">'.$data["id"].'</td>
                    <td>'.$data["libelle"].'</td>
                    <td>'.$data["description"].'</td>
                    <td align="center">                                                  	 
                        <button type="submit" name="detail"   href="#formManager" onclick="viewORedit('.$data["id"].',\'edit\')"  data-toggle="modal" data-backdrop="false"  class="btn btn-primary" style="padding: 0px 10px">
                            <span class="glyphicon glyphicon-edit"></span> 
                        </button>                                                            	 
                        <button type="button"  onclick="deleteRow('.$data["id"].')"  name="delRow" class="btn btn-danger" style="padding: 0px 10px">
                            <span class="glyphicon glyphicon-remove"></span>  
                        </button>           
                    </td>							
                  </tr>
                ';
        }
        exit($response); // retourne le resultat de la selection
    }else{
        exit('0');
    }
}

[elkhazak]

Bonjour,

J'ai pas d'expérience concernant Ajax mais ce que je connais c'est que le code suivant te permet d'actualiser le tableau aprés l'action :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 success:function(data){  
 
	                     Location.reload();
	                }

[Invité]

Bonjour,

@elkhazak
L'intérêt même d'Ajax est de NE PAS avoir à recharger toute la page.
Donc : si c'est pour recharger toute la page (Location.reload()), autant NE PAS utiliser Ajax !

@rolls
Il faut, après traitement * (ajouter,...), recharger le contenu de <tbody id="dataBody"></tbody>, en passant encore une fois par Ajax.
A priori : avec getExistingData(start, limit).


* SAUF que tu ne montres pas les scripts qui permettent d'ajouter/modifier/...

[elkhazak]

bonjour @jreaux62

La comme j'ai mentionné je voulais juste lui donner un coup de main

car je travaille sur un code qui fait l'affaire avec la fonction que j'ai écrit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 $(document).on('click', '.edit', function(){  
	            var id = $(this).attr("id");  	
 
 
	           $.ajax({  
	                url:"fetch.php",  
	                type:"POST",  
	                data:{id_presence:id},  
	                dataType:"json",  
 
	                success:function(data){  
 
 
	                     $('#code_abs').val(data.code_abs);  
 
	                     $('#insert').val("Modifier");                        
	                     Location.reload();
	                }  
	           });  
	      });

Et oui je comprends le principe d'Ajax

[NoSmoking]

Bonjour,

Location.reload();

avec un L cela ne risque pas de fonctionner

[Watilin]

car je travaille sur un code qui fait l'affaire avec la fonction que j'ai écrit

Il y a une nuance entre un code qui fait l’affaire et un code de qualité. Je sais qu’en conditions réelles on a souvent des contraintes de temps, mais sur un forum d’entraide ce n’est pas correct de proposer une solution qui « fait l’affaire. »

Ici, le principal problème c’est de comprendre sous quelle forme arrivent les données dans response. Pour trouver ce qui va de travers, il faut examiner le contenu envoyé par le serveur. rolls, tu peux faire ça en ouvrant ta console avec F12 et en sélectionnant le panneau réseau (ou network). Tu verras s’y afficher les requêtes ajax. En cliquant sur une requête, tu pourras la déplier pour afficher les détails, avec entre autres le corps de la réponse. L’en-tête Content-Type peut être intéressant également.

Montre-nous tout ça s’il-te-plaît

[RYMOOO]

Bonjour

Je voudrais exporter les données de datatable vers un fichier CSV , sachant que les données sont volumineuses (j'ai plus de 1000 enregistrements ) , la question qui se pose , est-ce que je dois parcourir le DOM ou il y a un autre moyen pour faire l'exportation , d'autre part , je pense que l’instanciation de chaque enregistrement n'est pas faisable vu la taille des données

En fait , je suis en train de réaliser une application sous Rshiny , et je voulais exporter les données modifier vers des fichiers CSV


Merci d'avance de votre réponse