Affichage des données dans un tableau à l'aide de PHP+json et javascript

**lakhdar16** · 24/02/2018, 20h24

bonjour,

je développe en ce moment une petite application web pour ma société, mais je tombe sur un point bloquant pour afficher les demande insérées par les employés dans un tableau car les données s'affiche sur le BODY pas dans mon tableaux et le compteurs des enregistrement me sort des chiffres bizarres.

je sollicite votre aide afin que je puisse avancer dans mon travail.

voici mon code 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GSAP</title>
<link href="fonts/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/swap_acs.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
 
 
</head>
 
<body>
<nav >
	<div class="logo">
    	<img src="images/logo.png" />
    </div>
    <ul>
 
        <li><a href="acs.php">acceuil</a></li>
        <li><a  href="swap_acs.php">swap</a></li>
        <li><a class="active">feed-back</a></li>
        <li><a href="#">rapport</a></li>
        <li><a href="#">guide</a></li>
        <li><a href="#">procédure</a></li>
 
        <div class="useractif">
        <p>Bienvenu(e) <?php echo $_SESSION['MM_Username'] ?></p>
        <li><a href="<?php echo $logoutAction ?>" onclick="return confirm('Voulez vous déconnecter?!');"><i class="fa fa-power-off fa-1x" style="color:red;"  aria-hidden="true" ></i>  déconnexion</a></li></div>
      </ul>
 
 
 
</nav>
 
 
 
	<div ng-app="myApp" ng-controller="controller">
        <div class="container">
            <br/>
            <h3 align="center">Liste des demandes de SWAP</a></h3>
            <br/>
            <div class="row">
                <div class="col-sm-2 pull-left">
                    <label>Afficher:</label>
                    <select ng-model="data_limit" class="form-control">
                        <option>10</option>
                        <option>20</option>
                        <option>50</option>
                        <option>100</option>
                    </select>
                </div>
                <div class="col-sm-6 pull-right">
                    <label>Search:</label>
                    <input type="text" ng-model="search" ng-change="filter()" placeholder="Search" class="form-control" />
                </div>
            </div>
            <br/>
            <div class="row">
                <div class="col-md-12" ng-show="filter_data > 0">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <th>ID SWAP&nbsp;<a ng-click="sort_with('id_swap');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>MSISDN&nbsp;<a ng-click="sort_with('msisdn');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>PROFIL&nbsp;<a ng-click="sort_with('profil');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>CODE PDV&nbsp;<a ng-click="sort_with('Code_PDV');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>RAISON S&nbsp;<a ng-click="sort_with('PDVname');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>GERANT S&nbsp;<a ng-click="sort_with('Gerant');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>WILAYA&nbsp;<a ng-click="sort_with('Wilaya');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>COMMUNE&nbsp;<a ng-click="sort_with('Commune');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>USER&nbsp;<a ng-click="sort_with('InserePar');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>DATE&nbsp;<a ng-click="sort_with('date_Insert');"><i class="glyphicon glyphicon-sort"></i></a></th>
                            <th>STATUT&nbsp;<a ng-click="sort_with('validation');"><i class="glyphicon glyphicon-sort"></i></a></th>
                        </thead>
                        <tbody>
                            <tr ng-repeat="data in searched = (file | filter:search | orderBy : base :reverse) | beginning_data:(current_grid-1)*data_limit | limitTo:data_limit">
                                <td>{{data.id_swap}}</td>
                                <td>{{data.msisdn}}</td>
                                <td>{{data.profil}}</td>
                                <td>{{data.Code_PDV}}</td>
                                <td>{{data.PDVname}}</td>
                                <td>{{data.Gerant}}</td>
                                <td>{{data.Wilaya}}</td>
                                <td>{{data.Commune}}</td>
                                <td>{{data.InserePar}}</td>
                                <td>{{data.date_Insert}}</td>
                                <td>{{data.validation}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-12" ng-show="filter_data == 0">
                    <div class="col-md-12">
                        <h4>Pas de données trouvées..</h4>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="col-md-6 pull-left">
                        <h5>Page {{ searched.length }} sur {{ entire_user}}</h5>
                    </div>
                    <div class="col-md-6" ng-show="filter_data > 0">
                        <div pagination="" page="current_grid" on-select-page="page_position(page)" boundary-links="true" total-items="filter_data" items-per-page="data_limit" class="pagination-small pull-right" previous-text="&laquo;" next-text="&raquo;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.12/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
    <script src="JS/myapp.js"></script>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
</body>
</html>

mon code PHP pour récupérer les demandes:

Base Mysql: "GSAP",
table: "tbl_swap"

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$conn  = new mysqli('localhost', 'root', '', 'GSAP');
$query = "select distinct id_swap, msisdn, profil, Code_PDV, PDVname, Gerant, Wilaya, Commune, InserePar, date_Insert, validation   from tbl_swap order BY id_swap";
$result = $conn->query($query) or die($conn->error . __LINE__);
$fetch_data = array();
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $fetch_data[] = $row;
    }
}
$jResponse = json_encode($fetch_data);
echo $jResponse;
?>

mon code javascript:

myapp.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
 
var app = angular.module('myApp', ['ui.bootstrap']);
app.filter('beginning_data', function() {
    return function(input, begin) {
        if (input) {
            begin = +begin;
            return input.slice(begin);
        }
        return [];
    }
});
app.controller('controller', function($scope, $http, $timeout) {
    $http.get('fetch.php').success(function(tbl_swap) {
        $scope.file = tbl_swap;
        $scope.current_grid = 1;
        $scope.data_limit = 10;
        $scope.filter_data = $scope.file.length;
        $scope.entire_user = $scope.file.length;
    });
    $scope.page_position = function(page_number) {
        $scope.current_grid = page_number;
    };
    $scope.filter = function() {
        $timeout(function() {
            $scope.filter_data = $scope.searched.length;
        }, 20);
    };
    $scope.sort_with = function(base) {
        $scope.base = base;
        $scope.reverse = !$scope.reverse;
    };
});

merci à vous.

Affichage des données dans un tableau à l'aide de PHP+json et javascript

AngularJS

Mode arborescent

Discussions similaires

Partager

Partager