Affichage et implémentation de dataTable

**medas8918** · 12/08/2016, 13h28

Bonjour à tous,

je suis sur un projet SF2
je récupère des données en json et j'essaye de les afficher.

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
33
34
35
36
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css" />
 <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
 <script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
 <script>
   $(function() {
     $('#data').DataTable({
       "processing": true,
       "serverSide": true,
       "ajax": "{{ path('aff_col') }}",
       "sAjaxDataProp": "data",
       "pageLength": 0,
       "columns":[
         {"data": "cl1"},
         {"data": "cl2"},
         {"data": "cl3"},
         {"data": "cl4"},
         {"data": "cl5"},
         {"data": "cl6"},
         {"data": "cl7"}
       ]
     });
   });
 
<table id="data" >
   <thead>
   <tr>
     <th>cl1</th>
     <th>cl2</th>
     <th>cl3</th>
     <th>cl4</th>
     <th>cl5</th>
     <th>cl6</th>
     <th>cl7</th>
   </tr>
   </thead>
 </table><br><br>

mais lors de l'affichage j'ai
{"data":[{"cl1":"PLK","cl2":"0","cl3":"HAA","cl4":"AB","cl5":"001","cl6":"","cl7":""},
{"cl1":"PLK","cl2":"0","cl3":"HAA","cl4":"LO","cl5":"100","cl6":"","cl7":""},
{"cl1":"PLK","cl2":"0","cl3":"HAA","cl4":"LO","cl5":"101","cl6":"","cl7":""},
{"cl1":"PLK","cl2":"0","cl3":"HAA","cl4":"LO","cl5":"102","cl6":"","cl7":""},
et je ne comprend pas comment déclarer car j'ai comme message:
L'encodage de caractères d'un document en texte brut n'a pas été déclaré. Le document sera affiché avec des caractères incorrects pour certaines configurations de navigateur si le document contient des caractères en dehors de la plage US-ASCII. L'encodage de caractères du fichier doit être déclaré dans le protocole de transfert ou le fichier doit utiliser une marque d'ordre des octets (BOM) comme signature d'encodage.
quelqu'un peut m'expliquer merci

**SpaceFrog** · 12/08/2016, 13h34

C'est ton vrai code ?

Il faut fermer la balise script ...

**medas8918** · 12/08/2016, 15h48

non ce n'est pas mon vrai code
j'ai bien fermé mes balises.
en m'inspisrant phpiste j'ai fait la même chose et la j'ai que mes entete et non ma donnée

**SpaceFrog** · 12/08/2016, 16h13

Tu es sur que l'ajax se déclenche ?
vérifie dans la console > onglet reseau ... Xhr

**medas8918** · 16/08/2016, 10h48

Bonjour,
désolé pour le temps de réponse.
j'ai aucune réponse pour réseaux->XHR

**SpaceFrog** · 16/08/2016, 13h51

Il faut creuser en ce sens ...

l'url est elle correcte ?
retourne-t-elle le bon code ?

**medas8918** · 16/08/2016, 14h14

l'url correspond bien à ma route qui le dirige dans mon contrôle pour le json
mon router:

Code :

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

1
2
3
4
5
6
sdin_syam_list:
    path: /list
    defaults: { _controller: KOSyamBundle:User:index}
sdin_syam_pag:
    path: /paginate
    defaults: { _controller: KOSyamBundle:User:paginate}

mon controller:

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
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
<?php
/**
 * Created by PhpStorm.
 */
 
namespace KO\SyamBundle\Controller;
 
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
 
class UserController extends Controller
{
    /**
     * @Route("/list", name="user_list")
     */
    public function indexAction()
    {
        return  $this->render('SDINSyamBundle:Ctrl:add.html.twig',array());
    }
 
    /**
     * @Route("/paginate", name="user_paginate")
     */
    public function paginateAction(Request $request)
    {
        $length = $request->get('length');
        $length = $length && ($length!=-1)?$length:0;
 
        $start = $request->get('start');
        $start = $length?($start && ($start!=-1)?$start:0)/$length:0;
 
        $search = $request->get('search');
        $filters = [
            'query' => @$search['value']
        ];
 
        $users = $this->getDoctrine()->getManager('myeamem')->getRepository('SDINSyamBundle:User')->search(
            $filters, $start, $length
        );
 
        $output = array(
            'data' => array(),
            'recordsFiltered' => count($this->getDoctrine()->getManager('myeamem')->getRepository('SDINSyamBundle:User')->search($filters, 0, false)),
            'recordsTotal' => count($this->getDoctrine()->getManager('myeamem')->getRepository('SDINSyamBundle:User')->search(array(), 0, false))
        );
 
        foreach ($users as $user) {
            $output['data'][] = [
                'id' => $user->getId(),
                'name' => $user->getName(),
                'created_at' => $user->getCreatedAt()->format('Y-m-d'),
            ];
        }
 
        return new Response(json_encode($output), 200, ['Content-Type' => 'application/json']);
    }
}
?>

ma vue:

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
33
34
35
36
37
38
39
40
41
42
43
44
{% extends '::Default:index.html.twig' %}
 
{% block head %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css" />
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
    <script>
        $(function() {
            $('#user-list').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ path('sdin_syam_pag') }}",
                "sAjaxDataProp": "data",
                "pageLength": 10,
                "columns":[
                    {"data": "id"},
                    {"data": "name"},
                    {"data": "created_at"}
                ]
            });
        });
    </script>
{% endblock %}
 
{% block body %}
 
    <table id="user-list">
        <thead>
        <tr>
            <th>ID</th>
            <th>Nom</th>
            <th>Crée le</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th data-value="name"></th>
            <th id="name"></th>
            <th id="created_at"></th>
        </tr>
        </tbody>
    </table>
{% endblock %}

je cherche, sinon je comptais construiremoi même mon tableau en utilisant juste le css de datatable
l'idée et de récupérer via mon répository la donnée et le nombre total de donnée,
dans mon controller je fais ma pagination et dans ma vue je construis le tableau dans une boucle for et je l'affiche via les balise td.

**phpiste** · 13/09/2016, 14h21

Bonjour,

tous d'abord il est inutile de déclarer tes routes avec yml et avec annotation.

Je te propose de modifier les deux routes dans l'yml par

Code :

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

1
2
3
4
users:
    resource: "@KO/SyamBundle/Controller/UserController.php"
    prefix:   /
    type: annotation

et d'utiliser cette route dans ton code js

Code :

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

"ajax": "{{ path('user_paginate') }}",

**medas8918** · 15/09/2016, 13h29

Merci mais je pense que je vais pas trouver mes petits
j'utilise le pluggins metro ui qui intègre datatable donc normalement sa devrait le faire mais je pense que je dois modifier mes routes pour que sa fonctionne comme tu l'as fait il faut que je l'adapte maintenant
à fin qu'il insère mes données.

question le json peut stoker plus de 500 mille lignes ou pas ?
quand je fais ma requête elle envoie exactement 358688 lignes que je dois traités sur différents boucles pour afficher les resultats attendu.

faut j'explique un peu le code ci-dessous:
alors je ne peux pas faire de dql fautes que la base que j'ai n'a ni clé primaire ou clé étranger donc je fais tous en SQL
c'est mon controller.

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
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
 
<?php 
 
<?php 
namespace Acme\DemoBundle\Controller; 
 
use Symfony\Bundle\FrameworkBundle\Controller\Controller; 
use Symfony\Component\HttpFoundation\Request; 
use Symfony\Component\HttpFoundation\Response; 
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; 
 
class UserController extends Controller 
{ 
 
    public function indexAction() 
    { 
        return  $this->render('AcmeDemoBundle:User:add.html.twig',array());   
    } 
 
    public function listeAction(Request $request) 
    {
		$quote="'";
		$code = "'OKL'";
		$type= "'DSI'";
		$cxnBd = $this->('doctrine.dbal.pgconnection');
		$sql = 'SELECT COUNT(*) FROM "SCHEMA"."TABLE" WHERE "TABLE"."Id"='.$code.';'
		$length = intval($cxnB->fetchAll($sql));  
        $length = $length && ($length!=-1)?$length:0; 
 
        $start = $request->get('start'); 
        $start = $length?($start && ($start!=-1)?$start:0)/$length:0; 
 
		$sql .= ' AND "TABLE"."TYPE" ='.$type ; 
 
        $search = $request->get('search'); 
 
        $filters = $cxnB->fetchAll($sql);
		$sqlUsers = 'SELECT 
							Id, 
							SITE, 
							TYPE, 
							NUM_CODE,
							COMPOSANT 
					FROM "SCHEMA"."TABLE" 
					WHERE "TABLE"."Id"='.$code ' 
					AND "TABLE"."TYPE" ='.$type; 
        $users = $cxnB->fetchAll($sqlUsers)
 
        $output = array( 
            'data' => array(), 
            'recordsFiltered' => intval($cxnB->fetchAll($sql)) 
            'recordsTotal' => intval($cxnB->fetchAll($sql)) 
        ); 
 
        foreach ($users as $user) 
		{ 
            foreach($dtusers as $dtuser)
			{
				$$dtusersite  =
                    $cxnBDA
                        ->fetchAll(
                            'SELECT count(*) as NbCleChi 
                            FROM "SITE"."DEPOT"
                            WHERE "DEPOT"."codeSite" = '.$quote.trim($user['Id']).$quote.'
                            AND  "DEPOT"."NUMERO_SITE" = '.$quote.trim($user['SITE']).$quote.'
                            AND  "DEPOT"."TYPE_SITE" = '.$quote.trim($user['TYPE']).$quote.'
                            AND  "DEPOT"."CODE_NUM" = '.$quote.trim($user['NUM_CODE']).$quote.'
                            AND  "DEPOT"."COMPONENt" = '.$quote.trim($user['COMPOSANT']).$quote);
 
			}
				$output['data'][] = [  
					'site' => $dtusersite[0]['Id'], 
					'numsite' =>$dtusersite[0]['SITE'], 
					'type site' =>$dtusersite[0]['TYPE'], 
					'code site' => $dtusersite[0]['NUM_CODE'], 
					'composant' => $dtusersite[0]['COMPOSANT'], 
            ]; 			
        } 
 
        return new Response(json_encode($output), 200, ['Content-Type' => 'application/json']); 
    } 
}

mon twig il est un peu long mais parce que j'utilise metro ui

c'est mon layout

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
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<html>
<head>
    {% block meta %}
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">
    {% endblock %}
    {% block favicon %}
        <link rel='shortcut icon' type='image/x-icon' href='{{ asset ('favicon.ico') }}'/>
    {% endblock %}
    {% block title %}
        <title>Template :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro
            Style</title>
    {% endblock %}
    {% block stylsheets %}
        <link href="{{ asset('bundles/metro/build/css/metro.css') }}" rel="stylesheet">
        <link href="{{ asset('bundles/metro/build/css/metro-icons.min.css') }}" rel="stylesheet">
        <link href="{{ asset('bundles/metro/build/css/metro-responsive.min.css') }}" rel="stylesheet">
    {% endblock %}
    {% block javascript %}
        <script src="{{ asset('bundles/metro/js/jquery-2.1.3.min.js') }}"></script>
        <script src="{{ asset('bundles/metro/docs/js/jquery.dataTables.min.js') }}"></script>
 
        <script src="{{ asset('bundles/metro/js/metro.js') }}"></script>
    {% endblock %}
 
    {% block script %}
        <script>
            function pushMessage(t) {
                var mes = 'Info|Implement independently';
                $.Notify({
                    caption: mes.split("|")[0],
                    content: mes.split("|")[1],
                    type: t
                });
            }
 
            $(function () {
                $('.sidebar').on('click', 'li', function () {
                    if (!$(this).hasClass('active')) {
                        $('.sidebar li').removeClass('active');
                        $(this).addClass('active');
                    }
                })
            })
        </script>
        <script>
                if($.fn.dataTable.isDataTable("#tableDataClefs"))
                    $("#tableDataClefs").DataTable().destroy();
                $("#tbodyDataClefs").remove();
                var element;
                var row;
                var col;
                var tbody = document.createElement("tbody");
                tbody.id = "tbodyDataAgents"; /* creation element du tableau */
                for (var i = 0; i < clef.length; i++) {
                    element = document.createElement('div');
                    row = document.createElement('tr');
                    col = document.createElement('td');
 
                    element.setAttribute('id', clef[i]['id']);
                    element.setAttribute('Site', clef[i]['cle_eam_site']);
                    element.setAttribute('numsite', clef[i]["cle_eam_palier"]);
                    element.setAttribute('type site', clef[i]['cle_sigma']);
                    element.setAttribute('type site', clef[i]['cle_sigma']);
                    element.setAttribute("style", "z-index : 3");
//                    element.className = "agent ui-widget-content ui-draggable ui-draggable-handle draggable";
 
                    //Ajout nom + prenom dans la case du tableau
                    $(element).append(document.createTextNode(
                            clef[i]["id"] + ' ' +
                            clef[i]['cle_eam_site'] + ' ' +
                            clef[i]["cle_eam_palier"] + ' ' +
                            clef[i]["Sigma"]));
 
                    row.appendChild(col);
                    col.appendChild(element);
                    tbody.appendChild(row);
 
                }
                $("#tableDataAgents").append(tbody);
                //Mise en place du tableau DataTable avec champs recherche
                $('#tableDataClefs').DataTable({
                    "paging": false,
                    "lengthChange": false,
                    "searching": true,
                    "ordering": false,
                    "info": false,
                    "autoWidth": false,
                    "scrollY": 350,
                    "language":{
                        "url": "{{ asset("bundles/datatables/plugins/dataTables.french.json") }}"
                    }
                });
 
            }
            $(document).ready(function() {
 
                $('#clef').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "paging": false,
                    "searching": false,
                    "language":{
                        "url":"{{ asset("bundles/datatables/plugins/dataTables.french.json") }}",
                    },
                    "ajax" : "{{ path('sdin_obj_list') }}",
                    "columns":[
                        {"data":"site"},
                        {"data":"numsite"},
                        {"data":"type"},
                        {"data":"code site"},
                        {"data":"composant"}
                    ]
                });
            });
        </script>
    {% endblock %}
</head>
{% block body %}
    <body class="bg-steel">
    {% block header %}
        {#fixed top bar#}
        <div class="app-bar fixed-top darcula" data-role="appbar">
            {#Bouton vers l'acceuil#}
            <a href="{{ path('sdin_accueil_homepage') }}" class="app-bar-element branding">Accueil</a>
            <span class="app-bar-divider"></span>
 
            {#Items du menu#}
            <ul class="app-bar-menu">
                <li><a href="{{ path('chemin') }}">Controle des Données</a></li>
                <li><a href="{{ path('edata',{'ctrlid':4}) }}">Gestion des données</a></li>
                <li>
                    <a href="" class="dropdown-toggle">Aide</a>
                    <ul class="d-menu" data-role="dropdown">
                        <li><a href="">Usage</a></li>
                        <li>
                            <a href="" class="dropdown-toggle">Support</a>
                            <ul class="d-menu" data-role="dropdown">
                                <li><a href="">ChatOn</a></li>
                                <li><a href="">Comunautaire</a></li>
                            </ul>
                        </li>
                        <li class="divider"></li>
                        <li><a href="">A propos</a></li>
                    </ul>
                </li>
            </ul>
 
            {#Items uttilisateurs#}
            <div class="app-bar-element place-right">
                <span class="dropdown-toggle"><span class="mif-cog"></span> User Name</span>
                <div class="app-bar-drop-container padding10 place-right no-margin-top block-shadow fg-dark"
                     data-role="dropdown" data-no-close="true" style="width: 220px">
                    <h2 class="text-light">Quick settings</h2>
                    <ul class="unstyled-list fg-dark">
                        <li><a href="" class="fg-white1 fg-hover-yellow">Profile</a></li>
                        <li><a href="" class="fg-white2 fg-hover-yellow">Security</a></li>
                        <li><a href="" class="fg-white3 fg-hover-red">Exit</a></li>
                    </ul>
                </div>
            </div>
        </div>
    {% endblock %}
    {% block content %}
        <div class="page-content">
            <div class="flex-grid no-responsive-future" style="height: 100%;">
                <div class="row" style="height: 100%">
                    {% block aside %}
                        <div class="cell size-x200" id="cell-sidebar" style="background-color: #71b1d1; height: 100%">
                            <ul class="sidebar">
                                {# changer class="counter" mettre en paramètre#}
                                {#ajouter la liaison ou l'action de l'icone cf controller#}
                                <li><a href="{{ path('sdin_syam_del') }}">
                                        <span class="mif-apps icon"></span>
                                        <span class="title">Tous</span>
                                        <span class="counter">0</span>
                                    </a></li>
                                <li class="active">
                                    {#ajouter la liaison ou l'action de l'icone cf controller#}
                                    <a href="#">
                                        <span class="mif-cogs icon"></span>
                                        <span class="title">Equipements</span>
                                        <span class="counter">0</span>
                                    </a>
                                </li>
                                <li>{#ajouter la liaison ou l'action de l'icone cf controller#}
                                    <a href="#">
                                        <span class="mif-location-city icon"></span>
                                        <span class="title">Locaux</span>
                                        <span class="counter">2</span>
                                    </a>
                                </li>
                                <li>{#ajouter la liaison ou l'action de l'icone cf controller#}
                                    <a href="#">
                                        <span class="mif-cloud icon"></span>
                                        <span class="title">PMRQ</span>
                                        <span class="counter">0</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="mif-database icon"></span>
                                        <span class="title">OIS/PPE</span>
                                        <span class="counter">0</span>
                                    </a>
                                </li>
                                <li>
                                    {#ajouter la liaison ou l'action de l'icone cf controller#}
                                    <a href="#">
                                        <span class="mif-chart-bars icon"></span>
                                        <span class="title">Statistiques</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
 
                    {% endblock %}
                    {% block main %}
                        {# récupérer en paramètre les bouttons REQUEST #}
                        <div class="cell auto-size padding20 bg-white" id="cell-content">
                            <h1 class="text-light">Contrôle des Equipements<span class="mif-cogs place-right"></span></h1>
                            <hr class="thin bg-grayLighter">
                            {#  afficher la totalité #}
                            <button class="button primary" onclick="pushMessage('info')"><span class="mif-plus"></span>
                                Tous...
                            </button>
                            {#  afficher nepasmignrer OK #}
                            <button class="button success" onclick="pushMessage('success')"><span
                                        class="mif-play"></span> Cochés
                            </button>
                            {#  Actualiser la donnée #}
                            <a href="{{ path('sdin_syam_del') }}"><button class="button warning" onclick="pushMessage('warning')"><span
                                        class="mif-loop2"></span> Restart
                            </button></a>
                            {#  quitter ou arrêt#}
                            <button class="button alert" onclick="pushMessage('alert')">Stoper</button>
                            <hr class="thin bg-grayLighter">
                            {% block table %}
                            <table id="clef" class="dataTable border bordered" data-role="datatable" data-auto-width="false">
                                {# en tête du tableau #}
                                <thead>
                                <tr>
                                   {# <td style="width: 20px">
                                    </td>#}
                                    {# tableau intéractif #}
                                    <th class="sortable-column">site</th>
                                    <th class="sortable-column">numsite</th>
                                    <th class="sortable-column">type site</th>
                                    <th class="sortable-column">code site</th>
                                    <th class="sortable-column">composantR</th>
 
                                </tr>
                                </thead>
                                {% block tbody %}
                                <tbody>
 
                                </tbody>
                                {% endblock %}
                            </table>
                            {% endblock %}
                        </div>
 
                    {% endblock %}
                </div>
            </div>
        </div>
    {% endblock %}
 
 
    {% block footer %}
    {% endblock %}
    </body>
{% endblock %}
{% block lastjs %}{% endblock %}
</html>

et mon add.html.twig

Code :

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

1
2
3
4
5
6
{% extends 'SDINSyamBundle::layout.html.twig' %}
{% block tbody %}
        <tbody>
 
 </tbody>
    {% endblock %}

Affichage et implémentation de dataTable

jQuery

Discussions similaires

Partager

Partager