2 pièce(s) jointe(s)
Actualisation d'un tableau AJAX/JSon
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:
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:
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é
Pièce jointe 268890
Pièce jointe 268893
Actualisation d'un tableau AJAX/JSon
Salut,
Normal qu'il t'affiche cela puisque ton data ne contienne aucune valeur...
Essai plutot de remplir ton data
