Actualisation d'un tableau AJAX/JSon

**didio** · 27/04/2017, 11h00

Bonjour,

J'utilise actuellement un tableau (à l'aide de Bootstrap) Ajax/Json qui affiche des données issues de ma base de données MSQL.

J'arrive à afficher ce tableau sans problème à l'aide d'un script constant. Le but est d'actualiser le tableau à l'aide d'un bouton mais d'avoir le tableau déjà présent sur ma page html.
Le tableau s'affiche mais ne s'actualise pas lorsque que je déclenche l’événement ( même fonction Jvs que celle qui affiche le tableau mais celle ci est dépendante d'un événement afin d'actualiser le tableau ) alors que mon tableau d'objet Json est à jour sur la console du navigateur. En rechargeant la page entièrement le tableau s'actualise. Est ce qu'il faut tout simplement créer une suppression d’événement ou pas?

Voici mon code jvs (oo.js):

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
      $('p').click(function(event){
 
$.ajax({
 
    url       : "tableau_accueil.php",
    type          : "POST",
    dataType    : "json"
 
 
    })
 
    .done(function(data){
        //ton code
 
        console.log(data); // si dans ta page PHP tu as un echo il te faut l'afficher ici la vue "generé" par la page php (page.php)
 
 
 
    $('#table').bootstrapTable({
        data: data
    });
 
 
 
 
    })
 
    .fail(function(data){
        //ton code
        console.log(data); //si page.php affiche une erreur tu le ferais dans la console
        console.log("erreur AJAX");
 
 
});
     });
 
 
 
      $(function(){
 
$.ajax({
 
    url       : "tableau_accueil.php",
    type          : "POST",
    dataType    : "json"
 
 
    })
 
    .done(function(data){
        //ton code
 
        console.log(data); // si dans ta page PHP tu as un echo il te faut l'afficher ici la vue "generé" par la page php (page.php)
 
 
 
    $('#table').bootstrapTable({
        data: data
    });
 
 
 
 
    })
 
    .fail(function(data){
        //ton code
        console.log(data); //si page.php affiche une erreur tu le ferais dans la console
        console.log("erreur AJAX");
 
 
});
     });

et voici ma page html :

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
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
 
        <meta name="author" content="">
        <link rel="icon" href="favicon.ico">
        <title>Starter Template for Bootstrap</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <link href="./css/starter-template.css" rel="stylesheet">
        <link href="./css/bootstrap-table.css" rel="stylesheet">
        <link href="./css/bootstrap-editable.css" rel="stylesheet">
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
    <!--[if lt IE 9]>
 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
    <![endif]-->
    </head>     
 
<body>  
 
<div class="navbar navbar-inverse navbar-fixed-top">
 
      <div class="container">
 
        <div class="navbar-header">
 
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 
            <span class="sr-only">Toggle navigation</span>
 
            <span class="icon-bar"></span>
 
            <span class="icon-bar"></span>
 
            <span class="icon-bar"></span>
 
          </button>
 
          <a class="navbar-brand" href="#">EIPH</a>
 
        </div>
 
        <div id="navbar" class="collapse navbar-collapse">
 
          <ul class="nav navbar-nav">
 
            <li class="active"><a href="#">Home</a></li>
 
            <li><a href="#about">WBS Template</a></li>
 
            <li><a href="#contact">Login</a></li>
 
          </ul>
          <form class="navbar-form navbar-right inline-form">
 
            <div class="form-group">
 
              <input type="search" class="input-sm form-control" placeholder="Recherche">
 
              <button type="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button>
 
            </div>
 
          </form>
 
 
        </div><!--/.nav-collapse -->
 
      </div>
 
    </div>
 
 
    <div class="container">
 
 
      <div class="starter-template">
     <P>coucou</P>   
    <table id="table">
    <thead>
    <tr>
        <th data-field="nom_wbs">Name</th>
        <th data-field="identifiant">Stars</th>
        <th data-field="date_de_creation">Forks</th>
        <th data-field="date_derniere_modification">Description</th>
        <th data-field="Staut">Description</th>
    </tr>
    </thead>
</table>    
 
      </div>
 
 
    </div><!-- /.container -->
 
 
    <script src="./js/jquery.js"></script>
 
 
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/bootstrap-table.js"></script>
    <script src="./js/ooo.js"></script>
 
</body>
 
</html>

Merci.

Ps: voici des images afin d'illustrer le soucis rencontré

Nom : Capture.PNG
Affichages : 519
Taille : 14,7 Ko

Nom : Capture.PNG
Affichages : 526
Taille : 6,3 Ko

**vbakyi** · 28/08/2018, 09h56

Salut,

Normal qu'il t'affiche cela puisque ton data ne contienne aucune valeur...

Essai plutot de remplir ton data

**SpaceFrog** · 30/08/2018, 08h07

et si tu clickes sur les éléments Object danz l'array de la console pour le déplier tu vois quoi ?

Invité · 30/08/2018, 11h23

Bonjour,

1- Tel que tu as écrit ton code, la balise <p> n'existe pas encore dans le DOM.
2- on peut écrire le code commun dans une fonction.
3- évite de nommer tes variable comme des mots-clé JS (ex. : data). Ça évitera les confusions.

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
function display_table()
{
	$.ajax({
		url		: "tableau_accueil.php",
		type		: "POST",
		dataType	: "json"
	})
	.done(function(datas){
		console.log(datas); // si dans ta page PHP tu as un echo il te faut l'afficher ici la vue "genéré" par la page php (page.php)
 
		$('#table').bootstrapTable({
			data: datas
		});
	})
	.fail(function(datas){
		console.log(datas); //si page.php affiche une erreur tu le ferais dans la console
		console.log("erreur AJAX");
	});
}
// au chargement de la page
$(window).on( 'load', function(){
	display_table();
});
// quand la page est chargée
$(function(){
	$('p').click(function(event){ // au click sur <p>
		display_table();
	});
});

$('p') : tu devrais définir plus clairement de quelle balise <p> il s'agit.
Sinon, on peut cliquer sur n'importe quelle balise <p> présente dans la page.

Actualisation d'un tableau AJAX/JSon

jQuery

Discussions similaires

Partager

Partager