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 :
et j'aimerais donc l'associer sur ma nouvelle page html (boostrap) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Voici mon script au cas où :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Est ce que je dois modifier mon fichier Bootstrap-Table.js où je peux directement le faire depuis ma page html ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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"); }); });
Merci.
Répondre avec citation
Partager