TableSorter et tri selon une liste déroulante

**loic20h28** · 22/08/2016, 09h29

Bonjour tout le monde,

Je me permet de venir vers vous car je rencontre un souci depuis plusieurs jours et je voit vraiment pas comment le résoudre.

J'ai une liste déroulante concernant un choix d'affichage des données dans un tableau :
1) Etape 1
2) Etape 2
3) Etape 3
Je choisit le premier choix, cela m'affiche les données dans mon tableau et je peux trier comme je veux (pour information, dans mon tableau, le tri se fait juste sur une colonne qui contient que du texte). Jusqu'ici tout va bien!!
Ensuite je choisit par exemple l'étape 2 dans ma liste déroulante, le tableau se vide et se recharge avec les nouvelles données. Lorsque je souhaite trier ma colonne, je peux juste trier de manière descendant par contre lorsque je re-choisit l'étape 1 dans ma liste déroulante, je peux à nouveaux trier dans les 2 sens.
Voici le code javascript :

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
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
 
jQuery(document).ready(function(){	
	$('div#dialog_confirmation_remise_document_douane, div#dialog_prise_donnee, form#form_suivi_des_commandes table#liste_client_par_usine_fournisseur_suiviDesCdes, form#form_suivi_des_commandes div.div_reload_suiviDesCdes').hide();
	$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes, form#form_suivi_des_commandes p.msg_aucun_resultat').hide();
 
	$('form#form_suivi_des_commandes select[name=choix_statut_suiviDesCdes]').change(function() {
		$('form#form_suivi_des_commandes div.div_reload_suiviDesCdes').show();
 
		onglet_suivi_des_commandes($(this).val()); 
	});
});
 
function onglet_suivi_des_commandes(choix_affichage) {
	if($('input[name=lang_hidden]').val()=="fr") {
		var labelFermer = "Fermer";
		var labelOui = "Oui";
		var labelNon = "Non";
		var labelAnnuler = "Annuler";
		var labelEnregistrer = "Enregistrer";
	} else {
		var labelFermer = "Chiudere";
		var labelOui = "Sì";
		var labelNon = "Non";
		var labelAnnuler = "Annullare";
		var labelEnregistrer = "Registrare";
	}
 
	if(choix_affichage=="1") {
		$.ajax({
			type:'POST',
			url: '../../SuiviCommande/fournisseur/php/fonction.php',
			data: { fonction: "listing_suivi_des_commandes_par_usine" },
			success: function(msg_listing_suivi_des_commandes_par_usine)
			{
				if(msg_listing_suivi_des_commandes_par_usine!="") {
					$('form#form_suivi_des_commandes table#liste_client_par_usine_fournisseur_suiviDesCdes tbody').html(msg_listing_suivi_des_commandes_par_usine);
					$('form#form_suivi_des_commandes table#liste_client_par_usine_fournisseur_suiviDesCdes').show();
					$('form#form_suivi_des_commandes div.div_reload_suiviDesCdes, form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes').hide();
					$('form#form_suivi_des_commandes p.msg_aucun_resultat').hide();
 
					$('form#form_suivi_des_commandes table#liste_client_par_usine_fournisseur_suiviDesCdes tbody tr td.col_usine').click(function() {
						ligne_courant = $(this).parent();
						$('form#form_suivi_des_commandes table#liste_client_par_usine_fournisseur_suiviDesCdes tbody tr td.col_usine input[name^=hidden_checked]').not(ligne_courant.children('td.col_usine').children('input[name^=hidden_checked]')).val('non');
						if($(this).children('input[name^=hidden_checked]').val()=="non") {
							$(this).children('input[name^=hidden_checked]').val('oui');
							$('form#form_suivi_des_commandes table#liste_client_par_usine_fournisseur_suiviDesCdes tbody tr.ligne_supplementaire').remove(); 
 
							$.ajax({
								type:'POST',
								url: '../../SuiviCommande/fournisseur/php/fonction.php',
								data: { "fonction": "listing_client_pour_une_usine", "id_usine": $(this).children('input[name^=hidden_id_usine]').val() },
								success: function(msg_listing_client_pour_une_usine)
								{
									ligne_courant.after(msg_listing_client_pour_une_usine);
 
									$('form#form_suivi_des_commandes table#liste_client_par_usine_fournisseur_suiviDesCdes tbody tr.ligne_supplementaire td table.table_ligne_supplementaire tbody tr td.col_prise_donnee').click(function() {
										col_prise_donnee_courant = $(this);
										numcc_SuiviDesCdes_fournisseur = $(this).parent().children('td:first').html();
										$('#dialog_prise_donnee').load('../../SuiviCommande/fournisseur/html/form_prise_donnee.html.php', {
											"numcc": numcc_SuiviDesCdes_fournisseur,
											"id_marque": ligne_courant.children('td.col_usine').children('input[name^=hidden_id_usine]').val(),
											"liste_article": $(this).parent().children('input[name^=hidden_listing_article]').val(),
											"nom_marque": ligne_courant.children('td.col_usine').children('input[name^=hidden_usine]').val()
										}, function() {
											$('#dialog_prise_donnee').dialog({
												modal: true,
												width: 800,
												title: 'PRISE DONNEE POUR CC.'+numcc_SuiviDesCdes_fournisseur+' - Marque: '+ligne_courant.children('td.col_usine').children('input[name^=hidden_usine]').val(),
												buttons: {
													[labelEnregistrer]: function() {
														var erreur = false;
 
														if($('form#form_prise_donnee_SuiviDesCdesFs input[name=nouvelle_adresse_SuiviDesCdesFs]').val()=="oui") { // Si nouvelle adresse.
															// On vérifie que l'input adresse soit rempli 
															if($('form#form_prise_donnee_SuiviDesCdesFs input[name=adresse_usine_SuiviDesCdesFs]').val()!="") {
																$('form#form_prise_donnee_SuiviDesCdesFs input[name=adresse_usine_SuiviDesCdesFs]').removeClass('erreur_saisie');
																// $('form#form_prise_donnee_SuiviDesCdesFs input[name=adresse_usine_SuiviDesCdesFs]').after('<input type="hidden" name="adr_usine_text_hidden[]" value="'+$(this).parent().parent().children(':nth-child(5)').children('input[name^=adresse_usine]').val()+'"></input>');
															} else { // Si non => erreur et affichage de l'élément avec bordure en rouge.
																erreur = true;
																$('form#form_prise_donnee_SuiviDesCdesFs input[name^=adresse_usine_SuiviDesCdesFs]').addClass('erreur_saisie');
															}
														} else { // Si adresse existante.
															// On vérifie que le select adresse soit != "0"
															if($('form#form_prise_donnee_SuiviDesCdesFs select[name^=adresse_usine_SuiviDesCdesFs]').val()!="0") {
																$('form#form_prise_donnee_SuiviDesCdesFs select[name^=adresse_usine_SuiviDesCdesFs]').removeClass('erreur_saisie');
																// $('form#form_prise_donnee_SuiviDesCdesFs select[name^=adresse_usine_SuiviDesCdesFs]').after('<input type="hidden" name="adr_usine_text_hidden[]" value="'+$(this).parent().parent().children(':nth-child(5)').children('select[name^=adresse_usine]').children('option:selected').val()+'"></input>');
															} else { // Si non => erreur et affichage de l'élément avec bordure en rouge.
																erreur = true;
																$('form#form_prise_donnee_SuiviDesCdesFs select[name^=adresse_usine_SuiviDesCdesFs]').addClass('erreur_saisie');
															}
														}
 
														if(erreur == true) {
															$('div#dialog_info_SuiviDesCdesFs').dialog({
																modal: true,
																width: 450,
																buttons: {
																	[labelFermer]: function() {
																		$('div#dialog_info_SuiviDesCdesFs').dialog("destroy");
																	}
																}
															});
														} else {
															date_day = new Date();
															if(date_day.getDate().toString().length=="1") {
																date_jour = '0'+date_day.getDate();
															} else {
																date_jour = date_day.getDate();
															}
															if((date_day.getMonth()+1).toString().length=="1") {
																date_mois = '0'+(date_day.getMonth()+1);
															} else {
																date_mois = (date_day.getMonth()+1);
															}
 
															$.ajax({
																dataType: "json",
																type: 'POST',
																url: '../../SuiviCommande/fournisseur/php/form_prise_donnee.php',
																data: $('form#form_prise_donnee_SuiviDesCdesFs').serialize(),
																complete: function(resultat, statut) {
																	if(resultat.responseText=="") {
																		col_prise_donnee_courant.html(date_jour+"/"+date_mois+"/"+date_day.getFullYear());
																		col_prise_donnee_courant.removeClass('col_prise_donnee');
																		col_prise_donnee_courant.unbind('click');
																		$('form#form_prise_donnee_SuiviDesCdesFs input[type=hidden]').val('');
																		$('div#dialog_prise_donnee').dialog("destroy");
																	} else {
																		$('form#form_prise_donnee_SuiviDesCdesFs input[type=hidden]').val('');
																		$('form#form_prise_donnee_SuiviDesCdesFs').attr('action', '../../ApplicationInterne/php/form_message_erreur.php?id_erreur='+resultat.responseText);
																		$('form#form_prise_donnee_SuiviDesCdesFs').submit();
																	}
																}
															});	
														}
													},
													[labelFermer]: function() {
														// On ferme la bôite de dialogue
														$('form#form_prise_donnee_SuiviDesCdesFs input[type=hidden]').val('');
														$('#dialog_prise_donnee').dialog("destroy");
													}
												}
											});
										});
									});
 
									$('form#form_suivi_des_commandes table#liste_client_par_usine_fournisseur_suiviDesCdes tbody tr.ligne_supplementaire td table.table_ligne_supplementaire tbody tr').each(function() {
										date_au_depot = $(this).children('td:last').prev().prev().html().split('/');
										$(this).children('td:last').children('input.datepicker_document_douane').datepicker({
											minDate: new Date(date_au_depot[2], (date_au_depot[1]-1), date_au_depot[0]),
											showOn: "button",
											buttonImage: "../../ApplicationInterne/image/calendar.gif",
											buttonImageOnly: true,
											buttonText: "Select date"
										});
									});
 
									$('form#form_suivi_des_commandes table#liste_client_par_usine_fournisseur_suiviDesCdes tbody tr.ligne_supplementaire td table.table_ligne_supplementaire tbody tr td.col_document_douane input[name^=date_document_douane_suiviDesCdes]').change(function() {
										date_document_douane = $(this);
										numcc = $(this).parent().parent().children('td:first').html();
										nom = $(this).parent().parent().children('td:first').next().html();
										marque = ligne_courant.children('td').children('input[name^=hidden_usine]').val();
										marqueid = ligne_courant.children('td').children('input[name^=hidden_id_usine]').val();
										ligneconsultationfournisseur = date_document_douane.parent().parent().children('input[name^=hidden_listing_article]').val();
 
										changement_date_document_douane("usine", date_document_douane, ligne_courant, numcc, nom, marque, marqueid, ligneconsultationfournisseur);
									});
								}
							});
						} else {
							$(this).children('input[name^=hidden_checked]').val('non');
							ligne_courant.next('tr.ligne_supplementaire').remove();
						}
					});
				} else {
					$('form#form_suivi_des_commandes table').hide();
					$('form#form_suivi_des_commandes p.msg_aucun_resultat').show();
				}
			}
		});
	} else if(choix_affichage > "1") {
		// $('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes tbody tr').remove();
		$.ajax({
			type:'POST',
			url: '../../SuiviCommande/fournisseur/php/fonction.php',
			data: { fonction: "listing_suivi_des_commandes_par_etape", "choix_affichage": choix_affichage },
			success: function(msg_listing_suivi_des_commandes_par_etape)
			{
				if(msg_listing_suivi_des_commandes_par_etape!="") {
					$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes tbody tr').remove();
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("sorton", [ [] ]);
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("update");
 
					$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes tbody').html(msg_listing_suivi_des_commandes_par_etape);
 
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").tablesorter({
						 headers: { 
							// assign the secound column (we start counting zero) 
							0: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							1: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							3: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							4: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							5: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							6: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							7: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							}
						}
					});
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("update");
 
					$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes thead tr th').show();
					$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes').show();
					$('form#form_suivi_des_commandes table#liste_client_par_usine_fournisseur_suiviDesCdes').hide();
					$('form#form_suivi_des_commandes div.div_reload_suiviDesCdes').hide();
					$('form#form_suivi_des_commandes p.msg_aucun_resultat').hide();
 
 
 
					if(choix_affichage=="2") {
						$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes thead tr th.col_depot_suiviDesCdes_fournisseur, form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes thead tr th.col_palette_suiviDesCdes_fournisseur, form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes thead tr th.col_document_suiviDesCdes_fournisseur').hide();
 
						$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes tbody tr td.col_prise_donnee').click(function() {
							ligne_courant = $(this).parent();
							col_prise_donnee_courant = $(this);
							numcc_SuiviDesCdes_fournisseur = $(this).parent().children('td:first').html();
							$('#dialog_prise_donnee').load('../../SuiviCommande/fournisseur/html/form_prise_donnee.html.php', {
								"numcc": numcc_SuiviDesCdes_fournisseur,
								"id_marque": ligne_courant.children('input[name^=hidden_usine_id]').val(),
								"liste_article": ligne_courant.children('input[name^=hidden_listing_ligneConsultation]').val(),
								"nom_marque": ligne_courant.children('input[name^=hidden_usine_nom]').val()
							}, function() {
								$('#dialog_prise_donnee').dialog({
									modal: true,
									width: 800,
									title: 'PRISE DONNEE POUR CC.'+numcc_SuiviDesCdes_fournisseur+' - Marque: '+ligne_courant.children('input[name^=hidden_usine_nom]').val(),
									buttons: {
										[labelEnregistrer]: function() {
											var erreur = false;
 
											if($('form#form_prise_donnee_SuiviDesCdesFs input[name=nouvelle_adresse_SuiviDesCdesFs]').val()=="oui") { // Si nouvelle adresse.
												// On vérifie que l'input adresse soit rempli 
												if($('form#form_prise_donnee_SuiviDesCdesFs input[name=adresse_usine_SuiviDesCdesFs]').val()!="") {
													$('form#form_prise_donnee_SuiviDesCdesFs input[name=adresse_usine_SuiviDesCdesFs]').removeClass('erreur_saisie');
													// $('form#form_prise_donnee_SuiviDesCdesFs input[name=adresse_usine_SuiviDesCdesFs]').after('<input type="hidden" name="adr_usine_text_hidden[]" value="'+$(this).parent().parent().children(':nth-child(5)').children('input[name^=adresse_usine]').val()+'"></input>');
												} else { // Si non => erreur et affichage de l'élément avec bordure en rouge.
													erreur = true;
													$('form#form_prise_donnee_SuiviDesCdesFs input[name^=adresse_usine_SuiviDesCdesFs]').addClass('erreur_saisie');
												}
											} else { // Si adresse existante.
												// On vérifie que le select adresse soit != "0"
												if($('form#form_prise_donnee_SuiviDesCdesFs select[name^=adresse_usine_SuiviDesCdesFs]').val()!="0") {
													$('form#form_prise_donnee_SuiviDesCdesFs select[name^=adresse_usine_SuiviDesCdesFs]').removeClass('erreur_saisie');
													// $('form#form_prise_donnee_SuiviDesCdesFs select[name^=adresse_usine_SuiviDesCdesFs]').after('<input type="hidden" name="adr_usine_text_hidden[]" value="'+$(this).parent().parent().children(':nth-child(5)').children('select[name^=adresse_usine]').children('option:selected').val()+'"></input>');
												} else { // Si non => erreur et affichage de l'élément avec bordure en rouge.
													erreur = true;
													$('form#form_prise_donnee_SuiviDesCdesFs select[name^=adresse_usine_SuiviDesCdesFs]').addClass('erreur_saisie');
												}
											}
 
											if(erreur == true) {
												$('div#dialog_info_SuiviDesCdesFs').dialog({
													modal: true,
													width: 450,
													buttons: {
														[labelFermer]: function() {
															$('div#dialog_info_SuiviDesCdesFs').dialog("destroy");
														}
													}
												});
											} else {
												date_day = new Date();
												if(date_day.getDate().toString().length=="1") {
													date_jour = '0'+date_day.getDate();
												} else {
													date_jour = date_day.getDate();
												}
												if((date_day.getMonth()+1).toString().length=="1") {
													date_mois = '0'+(date_day.getMonth()+1);
												} else {
													date_mois = (date_day.getMonth()+1);
												}
 
												$.ajax({
													dataType: "json",
													type: 'POST',
													url: '../../SuiviCommande/fournisseur/php/form_prise_donnee.php',
													data: $('form#form_prise_donnee_SuiviDesCdesFs').serialize(),
													complete: function(resultat, statut) {
														if(resultat.responseText=="") {
															$('form#form_prise_donnee_SuiviDesCdesFs input[type=hidden]').val('');
															$('div#dialog_prise_donnee').dialog("destroy");
															ligne_courant.remove();
															// let the plugin know that we made a update 
															$("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("update");
														} else {
															$('form#form_prise_donnee_SuiviDesCdesFs input[type=hidden]').val('');
															$('form#form_prise_donnee_SuiviDesCdesFs').attr('action', '../../ApplicationInterne/php/form_message_erreur.php?id_erreur='+resultat.responseText);
															$('form#form_prise_donnee_SuiviDesCdesFs').submit();
														}
													}
												});	
											}
										},
										[labelFermer]: function() {
											// On ferme la bôite de dialogue
											$('form#form_prise_donnee_SuiviDesCdesFs input[type=hidden]').val('');
											$('#dialog_prise_donnee').dialog("destroy");
										}
									}
								});
							});
						});
					} else if(choix_affichage=="3") {
						$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes thead tr th.col_depot_suiviDesCdes_fournisseur, form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes thead tr th.col_palette_suiviDesCdes_fournisseur, form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes thead tr th.col_document_suiviDesCdes_fournisseur').hide();
					} else if(choix_affichage=="4") {
						$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes tbody tr').each(function() {
							date_au_depot = $(this).children('td:last').prev().prev().html().split('/');
							$(this).children('td:last').children('input.datepicker_date_remise_document_douane_SuiviDesCdes_fournisseur').datepicker({
								minDate: new Date(date_au_depot[2], (date_au_depot[1]-1), date_au_depot[0]),
								showOn: "button",
								buttonImage: "../../ApplicationInterne/image/calendar.gif",
								buttonImageOnly: true,
								buttonText: "Select date"
							});
						});
						$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes tbody tr td input[name^=date_remise_document_douane_SuiviDesCdes_fournisseur]').change(function() {
							ligne_courant = $(this).parent().parent();
							numcc = ligne_courant.children('td:first').html();
							nom = ligne_courant.children('td:first').next().html();
							marque = ligne_courant.children('td:first').next().next().html();
							marqueid = ligne_courant.children('input[name^=hidden_usine_id_SuiviDesCdes_fournisseur]').val();
							ligneconsultationfournisseur = ligne_courant.children('input[name^=hidden_listing_ligneConsultation]').val();
 
							changement_date_document_douane("etape", $(this), ligne_courant, numcc, nom, marque, marqueid, ligneconsultationfournisseur);
						});
					}
				} else {
					// On affiche pas le tableau mais un message.
					$('form#form_suivi_des_commandes table, form#form_suivi_des_commandes div.div_reload_suiviDesCdes').hide();
					$('form#form_suivi_des_commandes p.msg_aucun_resultat').show();
				}
			}
		});
	} else {
		$('form#form_suivi_des_commandes table#liste_client_par_usine_fournisseur_suiviDesCdes, form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes').hide();
		$('form#form_suivi_des_commandes div.div_reload_suiviDesCdes').hide();
	}
}

Je pense pas que cela soit normal donc quelqu'un aurait-il une idée d’où peux provenir mon problème ?
Que dois-je faire pour le résoudre ?

Merci par avance!!
Loïc.

**danielhagnoul** · 22/08/2016, 11h23

Envoyé par loic20h28

[...] Ensuite je choisit par exemple l'étape 2 dans ma liste déroulante, le tableau se vide et se recharge avec les nouvelles données. Lorsque je souhaite trier ma colonne, je peux juste trier de manière descendant par contre lorsque je re-choisit l'étape 1 dans ma liste déroulante, je peux à nouveaux trier dans les 2 sens. [...]

Je croyais que cet ancien plugin avait disparu, mais je vois que la dernière mise à jour date de deux ans (https://github.com/christianbach/tablesorter).

Je n'ai pas le temps ni le courage de lire un code aussi touffu (multiples transactions AJAX imbriquées) et qu'il me sera de toute manière impossible de tester sur mon ordinateur.

Comme il s'agit de contenus dynamiques, il est probable que le plugin doive être tué et réinitialisé après chaque mise à jour des données.

C'est bien le cas dans la démonstration AJAX (http://tablesorter.com/docs/example-ajax.html) : il y a une méthode de réinitialisation du plugin et des paramètres de recherche.

Extrait :

Code javascript :

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

1
2
3
4
5
6
// let the plugin know that we made a update
$("table").trigger("update"); 
// set sorting column and direction, this will sort on the first and third column 
var sorting = [[2,1],[0,0]]; 
// sort on the first column 
$("table").trigger("sorton",[sorting]);

**loic20h28** · 22/08/2016, 12h11

Merci pour votre réponse danielhagnoul.

J'ai rajouté :

Code :

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

1
2
3
4
5
6
7
 
// let the plugin know that we made a update
$("table").trigger("update"); 
// set sorting column and direction, this will sort on the first and third column 
var sorting = [[2,1],[0,0]]; 
// sort on the first column 
$("table").trigger("sorton",[sorting]);

après l'initialisation de tablesorter comme vous pouvez le constater sur la partie de code ci-dessous.

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
 
// $('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes tbody tr').remove();
		$.ajax({
			type:'POST',
			url: '../../SuiviCommande/fournisseur/php/fonction.php',
			data: { fonction: "listing_suivi_des_commandes_par_etape", "choix_affichage": choix_affichage },
			success: function(msg_listing_suivi_des_commandes_par_etape)
			{
				if(msg_listing_suivi_des_commandes_par_etape!="") {
					// $('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes tbody tr').remove();
					// $("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("sorton", [ [] ]);
					// $("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("update");
 
					$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes tbody').html(msg_listing_suivi_des_commandes_par_etape);
 
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").tablesorter({
						 headers: { 
							// assign the secound column (we start counting zero) 
							0: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							1: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							3: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							4: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							5: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							6: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							7: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							}
						}
					});
					// let the plugin know that we made a update
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("update"); 
					// set sorting column and direction, this will sort on the first and third column 
					var sorting = [[2,1],[0,0]]; 
					// sort on the first column 
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("sorton",[sorting]);
}
});

Lorsque je choisit une étape dans ma liste déroulante, j'ai le message d'erreur suivant :

TypeError: h[list[i][0]] is undefined
setHeadersCss()
jquery.tablesorter.js:552
.tablesorter</this.construct/</<()
jquery.tablesorter.js:812
n.event.dispatch()
jquery-2.1.3.min.js:3
n.event.add/r.handle()
jquery-2.1.3.min.js:3
n.event.trigger()
jquery-2.1.3.min.js:3
.trigger/<()
jquery-2.1.3.min.js:3
.each()
jquery-2.1.3.min.js:2
n.prototype.each()
jquery-2.1.3.min.js:2
.trigger()
jquery-2.1.3.min.js:3
onglet_suivi_des_commandes/<.success()
commun.js:2178
n.Callbacks/j()
jquery-2.1.3.min.js:2
n.Callbacks/k.fireWith()
jquery-2.1.3.min.js:2
x()
jquery-2.1.3.min.js:4
.send/b/<()

Quelqu'un pourrait-il m'expliquer comment fonctionne la partie :

Code :

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

1
2
 
var sorting = [[2,1],[0,0]];

Je pense que c'est la que c'est incorrect!! Le tri peut être effectif juste sur ma colonne 2.

Merci par avance.
Loïc.

**danielhagnoul** · 22/08/2016, 21h38

var sorting = [[2,1],[0,0]]; : il faut adapter le code de l'exemple à vos besoins. Je ne connais pas le plugin, il faut lire la documentation et voir les exemples.

**loic20h28** · 23/08/2016, 11h02

Bonjour,
J'ai enfin je pense avoir compris le fonctionnement du code que tu m'a fournit.

Voici mon nouveau code :

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
 
		$.ajax({
			type:'POST',
			url: '../../SuiviCommande/fournisseur/php/fonction.php',
			data: { fonction: "listing_suivi_des_commandes_par_etape", "choix_affichage": choix_affichage },
			success: function(msg_listing_suivi_des_commandes_par_etape)
			{
				if(msg_listing_suivi_des_commandes_par_etape!="") {
 
					$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes tbody').html(msg_listing_suivi_des_commandes_par_etape);
 
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").tablesorter({
						 headers: { 
							// assign the secound column (we start counting zero) 
							0: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							1: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							3: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							4: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							5: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							6: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							7: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							}
						}
					});
					// let the plugin know that we made a update
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("update"); 
					// set sorting column and direction, this will sort on the first and third column 
					var sorting = [[2,0]]; 
					// sort on the first column 
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("sorton",[sorting]);
}
});

Par contre, cela ne résolu pas mon souci bien au contraire.
Je choisit l'étape1: pas de souci.
Ensuite je choisit l'étape 2: il m'affiche les anciennes données et les nouvelles (pas cool!!) et je peux faire qu'un tri.

Si je change mon code en mettant le bout de code avant l'affichage des nouvelles données :

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
 
		$.ajax({
			type:'POST',
			url: '../../SuiviCommande/fournisseur/php/fonction.php',
			data: { fonction: "listing_suivi_des_commandes_par_etape", "choix_affichage": choix_affichage },
			success: function(msg_listing_suivi_des_commandes_par_etape)
			{
				if(msg_listing_suivi_des_commandes_par_etape!="") {
					// let the plugin know that we made a update
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("update"); 
					// set sorting column and direction, this will sort on the first and third column 
					var sorting = [[2,0]]; 
					// sort on the first column 
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").trigger("sorton",[sorting]);
 
					$('form#form_suivi_des_commandes table#liste_client_par_etape_fournisseur_suiviDesCdes tbody').html(msg_listing_suivi_des_commandes_par_etape);
 
					$("table#liste_client_par_etape_fournisseur_suiviDesCdes").tablesorter({
						 headers: { 
							// assign the secound column (we start counting zero) 
							0: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							1: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							3: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							4: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							5: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							6: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							},
							7: { 
								// disable it by setting the property sorter to false 
								sorter: false 
							}
						}
					});
 
}
});

Je choisit l'étape1: pas de souci.
Ensuite je choisit l'étape 2: il m'affiche que les nouvelles données et je peux faire qu'un tri.

Je suis vraiment bloqué

Merci par avance!!

**danielhagnoul** · 23/08/2016, 11h39

Devoir tuer et réinitialiser un plugin après avoir modifié les données qu'il gère est souvent nécessaire. Ce qui arrive de nombreuses fois dans votre code (transactions AJAX multiples).

Pour les particularités de "tablesorter", je ne peux pas vous aider, car je ne connais pas le plugin. Je sais que DataTable est plus connu, mais il me semble d'un abord plus difficile et sa documentation est touffue. En fait, je n'ai jamais eu besoin de me servir d'un plugin table.

**loic20h28** · 23/08/2016, 11h50

Ok, je vous remercie d'avoir essayer danielhagnoul de m'aider!!

Quelqu'un d'autre aurai t'il la possibilité de m'aider à résoudre ce problème s'il vous plaît ?!

Merci par avance!!
Loïc.

TableSorter et tri selon une liste déroulante

jQuery

Discussions similaires

Partager

Partager