affichage d'une table de la base: javascript et webservice
Je suis en train de développer une solution pour l'affichage d'une table de la base de données SQL server en jquery mobile avec utilisation de webservices
Voilà le code du webservice
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
|
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public List<Flotte> GetFlotte()
{
string strQuery = "SELECT imsi,type FROM Flotte";
DataTable dtRecipie = null;
Flotte objFlotte;
ConnectionStringSettings connection = ConfigurationManager.ConnectionStrings["Connection"];
SqlConnection maConnexion = new SqlConnection(connection.ConnectionString);
using (maConnexion)
{
maConnexion.Open();
using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, maConnexion))
{
dtRecipie = new DataTable();
sqlAdapter.Fill(dtRecipie);
}
}
List<Flotte> drlist = new List<Flotte>();
foreach (DataRow row in dtRecipie.Rows)
{
objFlotte = new Flotte();
objFlotte.imsi = row["imsi"].ToString();
objFlotte.type = row["type"].ToString();
drlist.Add(objFlotte);
}
return drlist;
} |
et voilà mon code jquery mobile
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
|
<DOCTYPE html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device width,initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function CallService() {
$.ajax({
type: "POST",
url: "MyService.asmx/GetFlotte",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: OnError
});
}
function OnSuccess(data,status) {
for (var i = 0; i < data.d.length; i++) {
$("#GridID").append("<tr><td>" + data.d[i].imsi+ "</td><td>" + data.d[i].type + "</td></tr>")
}
function OnError(request, status, error) {
alert('erreur');
}
</script>
</head>
<body>
<div data-role="page" id="Home">
<div data-role="header" data-theme="b" >
<h1>Espace Admin: Gestion de flottes</h1>
</div>
<div data-role="content">
<h3 style="text-align:center;"><img src="/img/Maptek.png" alt="le logo de maptek maroc" width="300" height="50" /></h3>
<p>Bienvenue dans la section de gestion de flottes!</p>
<ul data-role="listview" data-inset="true">
<li><a href="#Affichage" data-transition="slide">Affichage de la flotte</a></li>
<li><a href="#" data-transition="slide">Modification de la flotte</a></li>
<li><a href="#" data-transition="slide">Ajout de device</a></li>
<li><a href="#" data-transition="slide">Suppression de la flotte ou device</a></li>
</ul>
</div>
<div data-role="footer" role="contentinfo" data-theme="b" >
<h4 class="center">Powered by Jquery Mobile</h4>
</div>
</div>
<div data-role="page" id="Affichage">
<div data-role="collapsible-set">
<div data-role="collapsible" data-content-theme="d">
<h3>Utilisateur1</h3>
<div class="margesinternes">
<p>
<div class="ui-grid-a" id="GridID">
<div class="ui-block-a">
<p> </p>
</div>
<div class="ui-block-b">
<p> </p>
</div>
</div><!-- /grid-a -->
</p>
</div>
</div>
<div data-role="collapsible" data-content-theme="d">
<h3>utilisateur2</h3>
<div class="margesinternes">
<p>Google est un organisme vivant...</p>
</div>
</div>
</div>
</div>
</body>
</html> |
en fait j'ai essayé d'utiliser une grille de jquerymobile pour récupérer la liste envoyé par le webservice , malheureusement ça marche pas. Mercii de me rectifier ce code.
