Question de débutant sur JQuery

Version imprimable

Bonjour à vous,
je gère un site sous wordpress et certains tableaux sont réalisés avec le script Datatable qui est appelé par JQuery, sachant que j'ai mis par défaut un affichage des 100 premières lignes :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 jQuery(document).ready(function($){ $('#Tableau').DataTable({ lengthMenu: [[25, 50,100,-1], [25, 50, 100,"Tout"]], iDisplayLength: 100, language: { lengthMenu: "Afficher_MENU_ éléments", info: "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments", search: "Rechercher :", paginate: { first: "Premier", last: "Dernier", next: "Suivant", previous: "Précédent" } } }); });
Tout cela marche très bien, mais j'aurais deux petites questions :

la première : comment puis-je faire pour appeler deux tableaux équivalents dans une même page php. Si je fais ça et que j'appelle deux tableaux avec l'id"Tableau", le premier fonctionne mais le second ne marche pas complétement au niveau de sa mise en forme.

la seconde : je voudrais pouvoir avoir des tableaux qui affichent par défaut 50 ou 100 lignes, si je copie-colle le code précédent en changeant juste #Tableau en #Tableau50 et #Tableau 100 d'une part et la valeur iDisplayLength d'autre part, ça ne fonctionne pas. Comment puis-je faire ?

Je ne sais pas si je suis très clair dans mes questions qui sont sans doute toutes bêtes, mais étant débutant autonome, je vous remercie de votre indulgence !

Merci d'avance !

Bonjour,

Citation:

Envoyé par Clement_archeo

le premier fonctionne mais le second ne marche pas complétement au niveau de sa mise en forme.

Comment initialise-tu les deux tables avec les id au niveau du sélecteur jQuery ?

D'après ce que je vois tu fais une erreur quelque part ... car je viens de tester la version "1.10.21" et avec deux tables (soit avec id ou class) et cela fonctionne correctement :

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
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
 
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DataTable Exemple</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
jQuery(document).ready(function($) {
  $('#T1,#T2').DataTable({
    lengthMenu: [
      [2,5, 7, 10, -1],
      [2,5,7, 10, "Tout"]
    ],
    iDisplayLength: 2,
    language: {
      lengthMenu: "Afficher_MENU_ éléments",
      info: "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
      infoFiltered:"(filtrés de _MAX_ entrées totales)",
      search: "Rechercher :",
      paginate: {
        first: "Premier",
        last: "Dernier",
        next: "Suivant",
        previous: "Précédent"
      }
    }
  });
});
</script>
</head>
<body>
<table id="T1" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td>Quinn Flynn</td>
      <td>Support Lead</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>$342,000</td>
    </tr>
    <tr>
      <td>Dai Rios</td>
      <td>Personnel Lead</td>
      <td>Edinburgh</td>
      <td>35</td>
      <td>$217,500</td>
    </tr>
    <tr>
      <td>Gavin Joyce</td>
      <td>Developer</td>
      <td>Edinburgh</td>
      <td>42</td>
      <td>$92,575</td>
    </tr>
    <tr>
      <td>Martena Mccray</td>
      <td>Post-Sales support</td>
      <td>Edinburgh</td>
      <td>46</td>
      <td>$324,050</td>
    </tr>
    <tr>
      <td>Jennifer Acosta</td>
      <td>Junior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>43</td>
      <td>$75,650</td>
    </tr>
    <tr>
      <td>Shad Decker</td>
      <td>Regional Director</td>
      <td>Edinburgh</td>
      <td>51</td>
      <td>$183,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>
<table id="T2" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>$90,560</td>
    </tr>
    <tr>
      <td>Haley Kennedy</td>
      <td>Senior Marketing Designer</td>
      <td>London</td>
      <td>43</td>
      <td>$313,500</td>
    </tr>
    <tr>
      <td>Tatyana Fitzpatrick</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>19</td>
      <td>$385,750</td>
    </tr>
    <tr>
      <td>Michael Silva</td>
      <td>Marketing Designer</td>
      <td>London</td>
      <td>66</td>
      <td>$198,500</td>
    </tr>
    <tr>
      <td>Bradley Greer</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>41</td>
      <td>$132,000</td>
    </tr>
    <tr>
      <td>Angelica Ramos</td>
      <td>Chief Executive Officer (CEO)</td>
      <td>London</td>
      <td>47</td>
      <td>$1,200,000</td>
    </tr>
    <tr>
      <td>Suki Burks</td>
      <td>Developer</td>
      <td>London</td>
      <td>53</td>
      <td>$114,500</td>
    </tr>
    <tr>
      <td>Prescott Bartlett</td>
      <td>Technical Author</td>
      <td>London</td>
      <td>27</td>
      <td>$145,000</td>
    </tr>
    <tr>
      <td>Timothy Mooney</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>37</td>
      <td>$136,200</td>
    </tr>
    <tr>
      <td>Bruno Nash</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>38</td>
      <td>$163,500</td>
    </tr>
    <tr>
      <td>Hermione Butler</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>47</td>
      <td>$356,250</td>
    </tr>
    <tr>
      <td>Lael Greer</td>
      <td>Systems Administrator</td>
      <td>London</td>
      <td>21</td>
      <td>$103,500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>
 
</body>
</html>

L'exemple affiche seulement 2 enregistrements par page (et si ça fonctionne avec 2, ça fonctionnera surement avec 50,100....) à l'affichage.

Puis tu peux aussi utiliser une class css comme sélecteur de jQuery au lieu des id $(".display").DataTable(...).

J'ajoute aussi un petit bonus trouvé dans la documentation concernant l'option language qui permet d'afficher la partie filtrée du message :

Code:

1
2
3
4
5
6
7
 
language:{
....
infoFiltered:"(filtrées de _MAX_ entrées totales)",
...
...
}

Merci pour ta réponse.
Et merci au passage pour le Bonus !! ;)

J'ai essayé de copier ta solution en appelant deux ID Tableau1 et Tableau2. ça ne fonctionne pas sur mon site en local, mais ça fonctionne bien sur mon site en ligne (j'avoue que je ne comprends pas pourquoi).

Donc merci en tout cas. Mais, du coup, est-ce que je peux compliquer l'affaire en demandant un tableau qui afficherait 100 éléments et 50 pour le suivant ?

Pour info, j'utilise la même version de Datatable avec :
Code:

1 2 3 4 5 6 7 //activer DataTables function tables_enqueue_scripts() { wp_enqueue_style('DataTables_css', 'https://cdn.datatables.net/v/dt/dt-1.10.21/fh-3.1.7/datatables.min.css'); wp_enqueue_script('DataTables_js', 'https://cdn.datatables.net/v/dt/dt-1.10.21/fh-3.1.7/datatables.min.js', ['jquery'], FALSE, TRUE); wp_enqueue_script('script-perso1', get_stylesheet_directory_uri() . '/custom-js/custom-jquery.js', array( 'jquery', 'DataTables_js' ), FALSE, TRUE ); }
Merci d'avance

Citation:

Envoyé par Clement_archeo

ça ne fonctionne pas sur mon site en local, mais ça fonctionne bien sur mon site en ligne (j'avoue que je ne comprends pas pourquoi).

Alors là :koi: je ne sais pas quoi dire appart remplacer le dollar "$" par "jQuery" ici :
Code:

1 2 3 $('#Tableau1,#Tableau2') //à remplacer par jQuery("#Tableau1,#Tableau2")
Citation:

Envoyé par Clement_archeo

est-ce que je peux compliquer l'affaire en demandant un tableau qui afficherait 100 éléments et 50 pour le suivant ?

Tu peux par exemple enregistrer les options dans une variable dtOptions, et tu initialise le premier tableau avec les paramètres par défaut puis tu modifies les valeurs dont tu as besoin pour initialiser le deuxième tableau comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 var dtOptions={ lengthMenu: [25, 50,100,-1], iDisplayLength: 100, language: { lengthMenu: "Afficher_MENU_ éléments", info: "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments", infoFiltered:"(filtrés de _MAX_ entrées totales)", search: "Rechercher :", paginate: { first: "Premier", last: "Dernier", next: "Suivant", previous: "Précédent" } } }; jQuery("#Tableau1").DataTable(dtOptions); dtOptions.lengthMenu=[10, 20, 50,100,"Tout"]; dtOptions.iDisplayLength=50; jQuery("#Tableau2").DataTable(dtOptions);

Merci beaucoup !
c'est super ! ça fonctionne très bien sur le site en ligne.
J'ai fait un mélange d'id (pour un tableau par défaut avec un affichage à 100) et de class pour pouvoir afficher plusieurs tableaux de 20 enregistrements.
ça donne ça :
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 //datatable jQuery(document).ready(function($){ var dtOptions={ lengthMenu: [10, 20, 50,100,"Tout"], iDisplayLength: 100, language: { lengthMenu: "Afficher_MENU_ éléments", info: "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments", infoFiltered:"(filtrés de _MAX_ entrées totales)", search: "Rechercher :", paginate: { first: "Premier", last: "Dernier", next: "Suivant", previous: "Précédent" } } }; jQuery("#Tableau").DataTable(dtOptions); dtOptions.lengthMenu=[10, 20, 50,100,"Tout"]; dtOptions.iDisplayLength=20; jQuery('Table.display').DataTable(dtOptions); } );
Par contre, ce que je ne comprends pas, c'est que ça ne fonctionne toujours pas sur le site local. J'ai beau avoir remplacé les $ comme conseillé, rien n'y fait.
SI jamais tu ne vois pas d'où ça peut venir autrement, je mettrai quand même le sujet comme résolu car tu as bien répondu à la question première.
Merci !

09/09/2020, 18h22
Toufik83
Bonjour,

visiblement il y'a un conflit de jQuery, voir jQuery.noConflict().

commence par l'ajouter juste avant jQuery(document).ready() comme ça :
Code:

1 2 3 4 5 jQuery.noConflict(); jQuery(document).ready(function($){ //code ici... });
10/09/2020, 14h50
Clement_archeo

Bon, en fait, tout marche même en local, mais avec un temps de retard. Je suis désolé, ça doit être un problème de cache.
En tout cas merci pour les réponses et conseils !