Datatables et classement

**manuzed78** · 31/10/2012, 16h46

Bonjour à tous,
depuis quelques semaines, j'ai découvert Datatables (merci le forum ) pour remplacer jqGrid.

Il répond à beaucoup de mes besoins mais j'ai quelques soucis avec les classements, petit exemple concret :

Voici la requete pour lister les membres de mon site :

Code :

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

1
2
3
SELECT login, date, time, nb_connexion, photo, mail, YEAR(date) AS year_connexion, MONTH(date) AS month_connexion, DAY(date) AS day_connexion
		FROM liste_membres
		ORDER BY nb_connexion desc

Notez bien le ORDER BY nb_connexion desc

enfin voici le JS pour datatables :

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
var oTable = $('#tableau_membres').dataTable( {
		"bJQueryUI": true,
		"sPaginationType": "full_numbers",
		"aaSorting": [[ 3, "desc" ]],  // order by numéro colone, asc / desc 
		"bStateSave": true,  // use cookies in the end user's web-browser, if the user were to reload the page, the table should remain exactly as it was
		"aLengthMenu": [[ -1,10,25,50], ["Tous",10,25,50]],  // nb éléments à afficher
			"oLanguage": {  // version Française
			"sProcessing": "Veuillez Patientez...",
			"sLengthMenu": "Affichage _MENU_ éléments par page",
			"sZeroRecords": "Aucun élément trouvé.",
			"sInfo": "Affichage _START_ à _END_ sur _TOTAL_ enregistrements",
			"sInfoEmpty": "Aucun enregistrement affiché",
			"sInfoFiltered": "(filtrés de _MAX_ enregistrements au total)",
			"sSearch": "Rechercher:",
			"oPaginate": {
				"sFirst":    "Premier",
				"sPrevious": "Préc",
				"sNext":     "Suiv",
				"sLast":     "Dernier"
				}
			}
	});

je RE précise que je veux le classement sur cette colone :"aaSorting": [[ 3, "desc" ]]
mais il n'y a rien à faire, ce n'est pas TOUJOURS le cas : http://manu-jdr.fr/section_membres.php

2 eme probleme : le classement pur en ce qui concerne les chiffres : voici un classement datatables qu'il peut me faire en DESC :
9
95
825
80
7
578
41
3
11

Y a t il une option pour régler ce problème ?

**tidus_6_9_2** · 02/11/2012, 16h44

Hello,

Ton problème proviendrait pas plutôt de SQL ?

Car ton champs est de type texte ou entier ?

Si c'est un texte il faut faire de cette façon:

select ... ORDER BY nb_connexion+0 desc

Bonne journée

**manuzed78** · 05/11/2012, 15h57

merci pour la piste de recherche

En fait, le bug n'apparait pas (plus) au premier chargement mais bel et bien apres avoir cliqué sur le champ pour effectuer un tri :
essaye ici : http://manu-jdr.fr/section_membres.php
et click sur connexion

Le ORDER BY nb_connexion+0 force le passage à un type non texte j'imagine ?

**tidus_6_9_2** · 13/11/2012, 09h15

Alors petite question, tu utilise un plugin pour le(s) tableaux ? Car cela peut provenir de ça (genre la requête envoie juste un order by normal sans le +0)

**manuzed78** · 14/11/2012, 11h02

Envoyé par tidus_6_9_2

Alors petite question, tu utilise un plugin pour le(s) tableaux ? Car cela peut provenir de ça (genre la requête envoie juste un order by normal sans le +0)

Euh non, quel plugin est il possible d'utiliser ?
y a t il des plugin pour datatables ?

En ligne j'ai enlevé le +0 mais quand je l'avais mis, cela ne changeai rien : au premier affichage les membres sont bien classés et quand on click sur connexions, le classement effectué par datatables est mauvais ...

je n'y comprend rien

**tidus_6_9_2** · 14/11/2012, 11h28

Je me suis mal fait comprendre et j'ai mal compris aussi

j'ai pas vus que datatables était le plugin JQuery ^^, tu en as d'autres par ailleurs (comme JQGrid par exemple). Mais bref

Revenons en à ton problème.

Ton trie ne s'effectuait que au chargement de la page c'est bien ça ? C'était avec ou sans le +0 ? Ou dans les deux cas ?

Quand tu clique sur le trie d'une colonne tu obtiens quoi comme SQL ?
As-tu essayé de faire la requête SQL sur MySql (ou autre?) afin de voir si le tri est bon ?

**manuzed78** · 14/11/2012, 11h39

Envoyé par tidus_6_9_2

Je me suis mal fait comprendre et j'ai mal compris aussi

j'ai pas vus que datatables était le plugin JQuery ^^, tu en as d'autres par ailleurs (comme JQGrid par exemple). Mais bref

J'utilise beaucoup jqGrid, mais il a des avantage ET des inconvenients par rapport à datatables ...

Envoyé par tidus_6_9_2

Ton trie ne s'effectuait que au chargement de la page c'est bien ça ? C'était avec ou sans le +0 ? Ou dans les deux cas ?

les deux cas, le +0 ne change rien : le classement est OK au chargement ( j'ai l'impression que datatables ne fait pas le classement et affiche juste en fonction du resultat de ma requete) et apres, tu peux le constater sur mon site, les classements sont faussés.

Envoyé par tidus_6_9_2

Quand tu clique sur le trie d'une colonne tu obtiens quoi comme SQL ?
As-tu essayé de faire la requête SQL sur MySql (ou autre?) afin de voir si le tri est bon ?

ma requete est niquel dans mysql mais quand datatables foire son classement je ne sais pas comment obtenir la requete !

**tidus_6_9_2** · 14/11/2012, 11h50

Pour JQgrid je suis d'accord

il y a toujours des inconvénients comme des avantages à utiliser certains plugins.

Pour ton problème, comme je n'ai pas trop de code sous les yeux

es-ce que tes colonnes ont bien un type numérique définies ?

Voir : http://www.datatables.net/examples/a...html_sort.html

[EDIT]

Me suis trompé d'URL je crois hehehe:
http://datatables.net/development/sorting#type_based

**manuzed78** · 14/11/2012, 12h05

Voici ma table :

-- Structure de la table `liste_membres`
--

Code sql :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
CREATE TABLE IF NOT EXISTS `liste_membres` (
  `id_membre` int(11) NOT NULL AUTO_INCREMENT,
  `nom` varchar(30) NOT NULL,
  `prenom` varchar(30) NOT NULL,
  `login` varchar(30) NOT NULL,
  `mail` varchar(100) NOT NULL,
  `password` varchar(50) NOT NULL,
  `photo` varchar(30) NOT NULL,
  `date` date NOT NULL,
  `time` time NOT NULL,
  `nb_connexion` int(11) NOT NULL,
  PRIMARY KEY (`id_membre`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=25 ;

pour moi, tout me semble bon : nb_connexion en interger ...

**tidus_6_9_2** · 14/11/2012, 12h13

Oui tout à fait ^^ je parles au niveau du plugin (javascript) directement si tu as définit le type de tes colonnes ?

Sous SQL sa me semble bon mais c'est surtout dans le plugin qu'il faut voir si tout est bien définit.

**manuzed78** · 14/11/2012, 13h10

Envoyé par tidus_6_9_2

c'est surtout dans le plugin qu'il faut voir si tout est bien définit.

En fait je ne lui dit rien ...
regarde mon premier message, il y a tout mon JS ...
Il y a une commande pour lui dire, telle colonne est de tel type ?

**tidus_6_9_2** · 14/11/2012, 13h54

Pardon je suis un peu à la masse en ce moment

Tu peux faire comme ça pour définir le type d'une colonne :

Code :

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

1
2
3
4
5
6
 
$('#example').dataTable( {
    "aoColumnDefs": [
      { "sType": "html", "aTargets": [ 0 ] }
    ]
  } );

ou "aTargets" est le numéro de ta colonne. Bien sur tu remplace le "html" par le type que tu veux.

Pour reprendre ce qu'ils disent :

The type allows you to specify how the data for this column will be sorted. Four types (string, numeric, date and html (which will strip HTML tags before sorting)) are currently available. Note that only date formats understood by Javascript's Date() object will be accepted as type date. For example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric', 'date' or 'html' (by default). Further types can be adding through plug-ins.

Tu peux donc ajouter le type "string" pour essayer si le tri SQL est bien pris en compte. Sinon force le en "numeric" pour voir ce que ça donne

**manuzed78** · 14/11/2012, 14h16

oups ,j'ai peur

C'est exactement ce que je cherchais, mais ça ne fonctionne pas.

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
$(document).ready(function() {
 
	var oTable = $('#tableau_membres').dataTable( {
		"bJQueryUI": true,
		"sPaginationType": "full_numbers",
		"aaSorting": [[ 3, "desc" ]],  // order by numéro colone, asc / desc 
		"bStateSave": true,  // use cookies in the end user's web-browser, if the user were to reload the page, the table should remain exactly as it was
		"aoColumnDefs": [ { "sType": "numeric", "aTargets": [ 3 ] }  ],
		"aLengthMenu": [[ -1,10,25,50], ["Tous",10,25,50]],  // nb éléments à afficher
			"oLanguage": {  // version Française
			"sProcessing": "Veuillez Patientez...",
			"sLengthMenu": "Affichage _MENU_ éléments par page",
			"sZeroRecords": "Aucun élément trouvé.",
			"sInfo": "Affichage _START_ à _END_ sur _TOTAL_ enregistrements",
			"sInfoEmpty": "Aucun enregistrement affiché",
			"sInfoFiltered": "(filtrés de _MAX_ enregistrements au total)",
			"sSearch": "Rechercher:",
			"oPaginate": {
				"sFirst":    "Premier",
				"sPrevious": "Préc",
				"sNext":     "Suiv",
				"sLast":     "Dernier"
				}
			}
	});
	/* Ajoute la class  highlighted à une colone*/
	oTable.$('td').hover( function() {
       var iCol = $('td', this.parentNode).index(this) % 9;  // % nb colones
       $('td:nth-child('+(iCol+1)+')', oTable.$('tr')).addClass( 'highlighted' );
		}, function() {
			oTable.$('td.highlighted').removeClass('highlighted');
		} );
 
 
});

j'ai essayé avec string , numeric ... rien n'y fait le classement est toujours mal effectué.
Voila ce que ça me donne sur ma base en local :
Nom Nb connexion
Coifran 0
Elchato 1
Hubies 1
Dada 1020
Glyn 16
Guy 2 ...

**tidus_6_9_2** · 14/11/2012, 15h00

Comme indiqué dans la doc tu peux créer tes propres fonctions de tris :

Code :

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

1
2
3
4
5
6
7
8
 
jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
    return ((x < y) ? -1 : ((x > y) ?  1 : 0));
};
 
jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
    return ((x < y) ?  1 : ((x > y) ? -1 : 0));
};

Donc en gros tu remplace le terme "string-case" par le nom que tu veux, et le return au lieu d'utiliser leurs calculs tu renvois toujours true (ou false je sais pas laquelle des deux valeurs il attend).

Ensuite comme dit avant, tu appelles pour la colonne que tu veux le type de trie que tu viens de créer.

A essayer

**manuzed78** · 14/11/2012, 15h09

Désolé mais trop dur à mettre en place pour moi.

Je ne comprends pas...

**fredoche** · 30/11/2012, 11h01

Salut

je passe sur ton post parce que je cherche un plug-in jquery qui gère des tables, à l'image de datatables

Ton problème ne viendrait il pas du fait que tu utilises la balise <strong> pour mettre en valeur le nb de connexions ?

Code :

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

<td>	<abbr title="le 06-11-2012 à 09:06:56">Il y a 24 jour(s)</abbr></td></tr><tr><td>Dada</td><td><abbr title="Le 24-11-2012 à 06:58:40">Il y a 6 jour(s)</abbr></td><td><strong>1041</strong></td><td>337</td><td>

essaie plutot de mettre une class sur ta cellule, ou un sur un span à l'intérieur de celle-ci, mais plutôt sur la cellule, vu le comportement avec <strong>, et de donner un style gras à cette classe.

Parce que le tri sur la colonne d'après semble bien marcher

**manuzed78** · 30/11/2012, 15h53

Envoyé par fredoche

Ton problème ne viendrait il pas du fait que tu utilises la balise <strong> pour mettre en valeur le nb de connexions ?

Et bien si !
En fait, au 1er caractère rencontré, il se dit que c'est un string et non un integer et fait le tri en fonction ...
Merci pour ton aide

Datatables et classement

jQuery

Discussions similaires

Partager

Partager