Lien dans un tableau Jquery/Ajax/Bootstrap
Bonjours j'ai développé un tableau qui contient des données de ma base MYSQL ( il est donc dynamique ) et j'aimerais savoir si il est possible que les données de la première colonne de mon tableau réalisé via bootstrap forment des liens vers une page précise tout en transférant une donnée [id] via GET.
J'ai tenté d'appliquer la méthode de mon ancien tableau qui ne marche pas :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <table>
<tr>
<td>WBS/LDP</td>
<td>Date de création</td>
<td>Utilisateur</td>
<td>Derniere modification</td>
<td>Statut</td>
</tr>
<?php
$reponse = $link->query('SELECT p.id_wbs_projet, p.nom_wbs, p.date_de_creation, p.date_derniere_modification, p.Statut, m.identifiant FROM wbs_projet p INNER JOIN membre m ON m.id_membre = p.id_membre');
while($donnees = $reponse->fetch()){
?>
<tr>
<td><a href="session.php?id=<?php echo $donnees['id_wbs_projet']; ?>"> <?php echo $donnees['nom_wbs']; ?> </a></td>
<td><?php echo $donnees['date_de_creation']; ?></td>
<td><?php echo $donnees['identifiant']; ?></td>
<td><?php echo $donnees['date_derniere_modification']; ?></td>
<td><?php echo $donnees['Statut']; ?></td>
</tr>
<?php
}?>
</table> |
et j'aimerais donc l'associer sur ma nouvelle page html (boostrap) :
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 <a href="session.php?id=<?php echo $donnees['id_wbs_projet']; ?>"> <?php echo $donnees['nom_wbs']; ?> </a></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> |
Voici mon script au cas où :
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
|
$('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
});
console.log("2");
})
.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
});
console.log("1");
})
.fail(function(data){
//ton code
console.log(data); //si page.php affiche une erreur tu le ferais dans la console
console.log("erreur AJAX");
});
}); |
Est ce que je dois modifier mon fichier Bootstrap-Table.js où je peux directement le faire depuis ma page html ?
Merci.
