Datatable et tri

Version imprimable

Datatable et tri

Bonsoir,

J'ai un site qui tourne depuis quelques années et ayant découvert Foundation, j'ai décidé de le mettre à jour.
J'ai quasiment terminé mais j'ai un souci de tri dans un tableau géré par la librairie DataTable.js.

Après plusieurs jours de recherches et d'essais infructueux, je viens auprès de vous pour essayer de trouver une solution à mon problème.

J'affiche mon tableau mais le tri de ma 1ere colonne n'est pas correctement réalisé. J'ai essayer de bidouiller une fonction de tri mais sans résultat.

Voici le code de la page qui appelle mon tableau :

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
	<div class="row">
		<div class="large-12 columns">
			<div id="donnees_stats" align='center'>
			</div>
		</div>
	</div>
 
	<div class="row">
		<div class="large-12 columns">
			<?php           // Inclus le fichier pieddepage.inc
                                include_once './include/pieddepage.inc';
                        ?>
		</div>
	</div>
 
 
 
    <script src="js/foundation.min.js"></script>
	<script src="js/foundation/foundation.tooltip.js"></script>
	<script src="js/datatablesorting/formatted-perso.js"></script>
 
    <script>$(document).foundation();</script>
 
	<script>
	    $(function() {
	        $('#bt_aff_stats').click(function() {
			var type_donnees = $('#Type_donnees').val();
			var type_stats = $('#Type_stats').val();
			var tcourse = $('#TCourse').val();
			var npartants = $('#Npartants').val();
			var adrurl = 'affiche_stats.php';
			var parametres = 'Type_donnees='+type_donnees+'&Type_stats='+type_stats+'&TCourse='+tcourse+'&Npartants='+npartants;
			$(document).ajaxStart(function() {
				$('#monPrompt').show();
			});	
			$(document).ajaxStop(function() {
				$('#monPrompt').hide();
			});
			$.ajax({
	            type: 'POST',
	            url: adrurl,
				data: parametres,
				success: function(data) {
					$('#donnees_stats').html(data); },
				error: function() {
					$('#donnees_stats').html('La requête n\'a pas aboutie. Actualiser votre page SVP.'); },
				complete: function () {
					$(document).ready(function() {
						$('#tableau').DataTable( {
							columnDefs: { type: 'combinaison', targets: 0 },
							paging:   false,
							responsive: true,
							ordering: true,
							searching: false,
							info:     false,
							language: {
					            processing:     "Traitement en cours...",
					            search:         "Rechercher&nbsp;:"
							}
							});
						} );
					}
	          });
 
	        });  
	      });
	</script>
   </body>
</html>

Le javascript formatted-perso.js

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
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
	"combinaison-pre": function ( a ) {
		var i, item;
		var m = a.split("-"), x = "";
 
		for(i = 0; i < m.length; i++) {
			item = m[i];
 
			if(item.length == 1) {
				x += "0" + item;
			}
			else {
				x += item;
			}
		}
		return parseFloat(x);
	},
 
	"combinaison-asc": function ( a, b ) {
		return ((a < b) ? -1 : ((a > b) ? 1 : 0));
	},
 
	"combinaison-desc": function ( a, b ) {
		return ((a < b) ? 1 : ((a > b) ? -1 : 0));
	}
});

Le problème :
j'ai des combinaisons de 2,3,4 ou 5 nombres allant de 1 à 20. Exemple : 1-2-3-4-5 , 1-3-7-10-12, 2-6-8-9-10 etc.
Le tri actuel n'est pas bon. 1-10 est placé avant 1-2.
Voir en ligne le problème :
http://statocourses.free.fr/statocou...atistiques.php
Choiri statistiques quinté par exemple.

Voir le tri recherché :
http://statocourses.free.fr/statistiques.php

Si quelqu'un pouvait éclairer ma lanterne ?
En espérant avoir été clair.
Merci d'avance.

08/12/2015, 00h55
danielhagnoul

Vous devez demander un tri numérique, voir : http://www.datatables.net/plug-ins/sorting/
08/12/2015, 21h20
Malola

merci daniel mais j'ai déjà essayé toutes les options figurant dans le plugin sorting et aucune n'a fonctionné correctement.

C'est pour cela que j'ai tenté un script maison mais sans succès.

Tu peux vérifier sur mon site puisque c'est maintenant cette config qui est installée.

Une autre idée ?
08/12/2015, 22h43
danielhagnoul

Je viens de regarder le tableau sur http://statocourses.free.fr/statocou...atistiques.php.

Je ne vois aucune erreur de tri, toutes les colonnes se trient correctement en ascendant ou en descendant.
09/12/2015, 14h02
Malola

Désolé mais le tri n'est pas effectué correctement.
En effet, si l'on prend les statistiques Quinté, il est proposé l'ordre suivant :
1-10-11-12-17
1-10-12-13-16
1-10-12-13-20
1-10-13-14-15
1-10-14-15-16
1-11-13-14-16
1-12-15-16-18
1-2-10-11-12
1-2-10-11-13
1-2-10-11-14
1-2-10-11-16
1-2-10-12-13
1-2-10-12-14
1-2-10-13-15
1-2-10-14-16

alors que l'ordre recherché est celui ci :

1-2-3-4-5
1-2-3-4-6
1-2-3-4-7
1-2-4-5-6
1-2-3-5-7
1-2-3-5-6
1-3-4-5-6
1-2-3-5-8
1-2-3-4-8
1-2-3-5-9
1-2-3-8-9
1-2-4-6-7
1-2-3-4-9
1-2-3-6-7
1-3-4-5-7
1-2-5-6-9
1-2-5-6-8
1-2-4-5-8
1-3-4-6-7
2-3-4-5-9
1-2-3-7-8
1-2-5-6-7
1-2-3-4-11
1-2-3-5-10
1-2-4-5-10

Pour les autres colonnes, les tris sont bons.

merci encore de prendre un peu de ton temps pour résoudre mon problème.
09/12/2015, 15h00
NoSmoking

Bonjour,
visiblement tu fais du tri sur des chaines de caractères et non sur des nombres ce qui explique le résultat.

Citation:

Envoyé par danielhagnoul

Vous devez demander un tri numérique

Le plugin a plusieurs options dont
natural -> Sort data with a mix of numbers and letters _naturally_.
https://www.datatables.net/plug-ins/sorting/natural

Et même celui ne me donne pas le résultat escompté.

C'est pour cela que j'ai pensé à remplacer ma chaine de caractère de la façon suivante :
1-2-7-10-12 devient 0102071012
et de ce fait ma comparaison devient naturelle puisque si je compare par exemple
1-2-7-10-12 avec 1-10-11-12-13 cela revient à comparer 0102071012 avec 0110111213
et naturellement le 1er et avant le 2nd.

Mais mon script marche pas non plus :aie:
je le remets pour info
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 jQuery.extend( jQuery.fn.dataTableExt.oSort, { "combinaison-pre": function ( a ) { var i, item; var m = a.split("-"), x = ""; for(i = 0; i < m.length; i++) { item = m[i]; if(item.length == 1) { x += "0" + item; } else { x += item; } } return parseFloat(x); }, "combinaison-asc": function ( a, b ) { return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }, "combinaison-desc": function ( a, b ) { return ((a < b) ? 1 : ((a > b) ? -1 : 0)); } });
je me casse la tête dessus depuis plusieurs jours mais rien ne va lol

@+

Dans votre table, vous avez des colonnes avec des nombres, des textes et des dates et une seule consigne de tri : { type: 'numeric-comma', targets: 0 }

Par rapport à cette consigne, le tri est correct.

***

Le contenu des "TD" de la colonne "Combinaison", c'est du texte et il est impossible qu'il en soit autrement.

Il faut un tri alphanumérique sur la première colonne.

Exemple avec sortTable() :
Code:

1 2 3 4 5 var table = [ "1-2-10-11-12", "1-2-9-15-16", "1-2-7-9-15", "1-2-8-10-11", "1-2-6-8-14", "1-2-5-9-6", "1-2-4-8-17", "1-2-3-9-10" ]; console.log( sortTable( table ) ); : //["1-2-3-9-10", "1-2-4-8-17", "1-2-5-9-6", "1-2-6-8-14", "1-2-7-9-15", "1-2-8-10-11", "1-2-9-15-16", "1-2-10-11-12"]
***

Je ne connais pas bien datatable, je ne sais pas à quel réglage correspond l'alphanumérique. Peut-être "natural".

Merci pour toutes vos remarques.
je me pose une autre question :

le tri ne fonctionnant pas correctement, cela peut-il venir du code qui génère la table ?

Je génère la table (tr, th, td,etc) par une fonction AJAX puis "j'active" Datatable quand la requête AJAX est complète.

Ne faudrait-il pas créer une table datable où les données sont générées par un appel AJAX ?

par exemple

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
<script>
	    $(function() {
	        $('#bt_aff_stats').click(function() {
			var type_donnees = $('#Type_donnees').val();
			var type_stats = $('#Type_stats').val();
			var tcourse = $('#TCourse').val();
			var npartants = $('#Npartants').val();
			var adrurl = 'affiche_stats.php';
			var parametres = 'Type_donnees='+type_donnees+'&Type_stats='+type_stats+'&TCourse='+tcourse+'&Npartants='+npartants;
			$(document).ajaxStart(function() {
				$('#monPrompt').show();
			});	
			$(document).ajaxStop(function() {
				$('#monPrompt').hide();
			});
			$(document).ready(function() {
			         $('#tableau').DataTable( {
							columnDefs: { type: 'combinaison', targets: 0 },
							paging:   false,
							responsive: true,
							ordering: true,
							searching: false,
							info:     false,
							loadData : function () {
                                                           $.ajax({
	                                                      type: 'POST',
	                                                      url: adrurl,
		                                 		data: parametres,
				success: function(data) {
					$('#donnees_stats').html(data); },
				error: function() {
					$('#donnees_stats').html('La requête n\'a pas aboutie. Actualiser votre page SVP.'); },
										} );
					}
	          });
 
	        });  
	      });
	</script>

Oui je suis un être torturé !!!!!