Tableau trié par date seulement

Version imprimable

22/03/2014, 09h05
benjea06

Tableau trié par date seulement

Bonjour à tous,

J'ai un tableau html CSS simple .

doc1 modifié le 21/03/14
doc2 modifié le 20/03/14...

Je cherche à imposer un tri par date seulement. ( de la plus récente à la plus ancienne ).
J'ai trouvé des scripts avec tris de colonnes mais aucun qui impose ce tri exclusif.
Quelqu'un aurait il la solution svp?

Merci pour votre aide.
22/03/2014, 16h33
NoSmoking

Bonjour,

Citation:

J'ai un tableau html CSS simple .

montre nous la structure réelle que tu utilises, les "tableaux" HTML n'étant pas des "tableaux" javascript.

J'ai dans un premier temps travaillé sur cette base qui fonctionne pas trop mal sauf que je cherche à imposer un tri par date décroissante

Code:

1
2
3
4
5
6
7
8
9
10
11
<HTML>
<STYLE>
#trier { background-color:white; color:black; border-collapse:collapse; BORDER:white 1px solid; FONT:12 Arial; TEXT-ALIGN:center }
#trier TR { background-color:#ffefd5 }
#trier .title { background-color:#bf2b2f; FONT:14 Arial; color:#ffffff; font-weight:bold }
SPAN { FONT:bold 12 Arial; CURSOR:pointer }
BODY { background-color:#FFF5E5 }
#trier TD { BORDER:white 1px solid; }
SPAN { FONT:bold 12 Arial; CURSOR:pointer }
BODY { background-color:#FFF5E5;}
</STYLE>

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
<SCRIPT>
var index
function  sort_int(p1,p2) { return p1[index]-p2[index]; }			//fonction pour trier les nombres
function sort_char(p1,p2) { return ((p1[index]>=p2[index])<<1)-1; }	//fonction pour trier les strings
 
function TableOrder(e,Dec)  //Dec= 0:Croissant, 1:Décroissant
{ //---- Détermine : oCell(cellule) oTable(table) index(index cellule) -----//
	var FntSort = new Array()
	if(!e) e=window.event
	for(oCell=e.srcElement?e.srcElement:e.target;oCell.tagName!="TD";oCell=oCell.parentNode);	//determine la cellule sélectionnée
	for(oTable=oCell.parentNode;oTable.tagName!="TABLE";oTable=oTable.parentNode);				//determine l'objet table parent
	for(index=0;oTable.rows[0].cells[index]!=oCell;index++);									//determine l'index de la cellule
 
 //---- Copier Tableau Html dans Table JavaScript ----//
	var Table = new Array()
	for(r=1;r<oTable.rows.length;r++) Table[r-1] = new Array()
 
	for(c=0;c<oTable.rows[0].cells.length;c++)[	//Sur toutes les cellules
		var Type;
		objet=oTable.rows[1].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
		if(objet.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) { FntSort[c]=sort_char; Type=0; } //date jj/mm/aaaa
		else if(objet.match(/^[0-9£?$\.\s-]+$/))		{ FntSort[c]=sort_int;  Type=1; } //nombre, numéraire
		else											{ FntSort[c]=sort_char; Type=2; } //Chaine de caractère
 
		for(r=1;r<oTable.rows.length;r++)		//De toutes les rangées
		{	objet=oTable.rows[r].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
			switch(Type)		
			{	case 0: Table[r-1][c]=new Date(objet.substring(6),objet.substring(3,5),objet.substring(0,2)); break; //date jj/mm/aaaa
				case 1: Table[r-1][c]=parseFloat(objet.replace(/[^0-9.-]/g,'')); break; //nombre
				case 2: Table[r-1][c]=objet.toLowerCase(); break; //Chaine de caractère
			}
			Table[r-1][c+oTable.rows[0].cells.length] = oTable.rows[r].cells[c].innerHTML
		}
	}
 
 //--- Tri Table ---//
	Table.sort(FntSort[index]);
	if(Dec) Table.reverse();
 
 //---- Copier Table JavaScript dans Tableau Html ----//
	for(c=0;c<oTable.rows[0].cells.length;c++)	//Sur toutes les cellules
		for(r=1;r<oTable.rows.length;r++)		//De toutes les rangées 
			oTable.rows[r].cells[c].innerHTML=Table[r-1][c+oTable.rows[0].cells.length];  
}
</SCRIPT>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>    
<table id=trier>
	<tr class=title>
		<td>Nom 		<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Modifié le	<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Nb			<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Prix		<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
	</tr>
	<tr><td>un    </td><td>20/03/2005</td><td>12</td><td id=money>$12 </td></tr>
	<tr><td>deux  </td><td>22/02/2005</td><td> 2</td><td id=money>1.2?</td></tr>
	<tr><td><font color="#FF6600">trois</font></td><td><font color="#FF6600">23/02/2005</font></td><td><font color="#FF6600">25</font></td><td id=money><font color="#FF6600">£5.7</font></td>	</tr>
	<tr><td>quatre</td><td>23/05/2005</td><td>-4</td><td id=money>£1.3</td></tr>
	<tr><td>cinq  </td><td>23/02/2006</td><td>16</td><td id=money>5.20</td></tr>
</table>
</body>
</html>

23/03/2014, 08h39
NoSmoking

:koi:

Code:

function TableOrder(e,Dec) //Dec= 0:Croissant, 1:Décroissant
23/03/2014, 13h08
benjea06

Quoi? c'est pas bon?

En fait ce script me conviendrait bien s'il imposait le tri par date décroissante par défaut.
23/03/2014, 15h06
NoSmoking

Par défaut aucun tri n'est réalisé, si tu veux un tri particulier il te faut le forcer après chargement de ta page.
Si ton code est généré coté serveur autant le faire coté serveur.
23/03/2014, 19h12
benjea06

Evidemment, suis-je bête... C'est moi qui, pour l'instant, est classé par ordre les documents... :)
Mais, en effet ce ne sera pas toujours le cas.
D’où l’intérêt de ce tri par défaut par dates décroissantes.
Compliqué à faire?

Citation:

Compliqué à faire?

au vu du code il te suffit d'appeler la fonction une fois le document chargé.

Si l'on regarde ce qu'attend la fonction pour fonctionner, on voit qu'elle à besoin d'un objet e, cela se joue dans le début de la fonction...
Code:

1 2 3 4 5 function TableOrder(e,Dec) //Dec= 0:Croissant, 1:Décroissant { //---- Détermine : oCell(cellule) oTable(table) index(index cellule) -----// var FntSort = new Array() if(!e) e=window.event for(oCell=e.srcElement?e.srcElement:e.target;oCell.tagName!="TD";oCell=oCell.parentNode); //determine la cellule sélectionnée
il suffit donc de lui passer ce qu'elle veut et le tour est joué.

Je verrais bien un truc dans le style

Code:

TableOrder({target: document.getElementById('init')}, 1);

il te reste à identifier le bon SPAN en lui ajoutant une id="init".

Code:

<td>Modifié le <span id="init" onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>

25/03/2014, 09h12
benjea06

BonjourNoSmoking.

Merci pour ce code.

J'ai remplacé le TD mais je ne sais pas où mettre le table order.
Dois-je rajouter des informations id dans mes td date également?
25/03/2014, 09h37
SpaceFrog

Edit:

Petite rectification sur les codes précédents

http://jsfiddle.net/thkY5/2/

(exclusion du match [0])

Soit je suis vraiment pas bon avec ces lignes de codes Javascript soit ça ne passe pas.. :)

Html

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        <"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <script type="text/javascript" src="test2.js"></script>
</head>
<body>
    <!---------------------------------------------- CHAPITRE ----------------------------------------------->
    <table id="foo" border="1">
        <tr>
            <td>doc1 modifié le 01/01/14</td>
        </tr>
        <tr>
            <td>doc1 modifié le 21/03/14</td>
        </tr>
        <tr>
            <td>doc1 modifié le 09/12/14</td>
        </tr>
        <tr>
            <td>doc1 modifié le 05/07/14</td>
        </tr>
        <tr>
            <td>doc1 modifié le 28/08/14</td>
        </tr>
        <tr>
            <td>doc1 modifié le 27/02/13</td>
        </tr>
    </table>
    <input type="button" value="asc" id="asc" />
    <input type="button" value="desc" id="desc" />
    </table>
    <!-------------------------------------------- FIN CHAPITRE --------------------------------------------->
</body>
</html>

fichier test2.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
27
28
29
30
31
32
33
34
35
var sens;
function sortdate(a, b, c) {
    reg = /(\d{2})\/(\d{2})\/(\d{2})/;
    dateA = a.getElementsByTagName('td')[0].innerHTML.match(reg)
    dateA.shift();
    dateA = dateA.reverse().join('');
    dateB = b.getElementsByTagName('td')[0].innerHTML.match(reg)
    dateB.shift();
    dateB = dateB.reverse().join('');
    console.log(+dateA - +dateB)
    return (+dateA - +dateB) * ((sens == "asc") ? 1 : -1);
}
function sortTable(way) {
    sens = way;
    getlignes = document.getElementsByTagName('tr');
    tablignes = new Array();
    var i = -1;
    while (getlignes[++i]) {
        tablignes.push(getlignes[i]);
    }
    tablignes.sort(sortdate);
    var i = -1;
    while (tablignes[++i]) {
        document.getElementById('foo').appendChild(tablignes[i]);
    }
}
function init() {
    document.getElementById('asc').addEventListener('click', function () {
        sortTable('asc')
    })
    document.getElementById('desc').addEventListener('click', function () {
        sortTable('desc')
    })
}
init();

25/03/2014, 12h48
SpaceFrog

http://jsfiddle.net/thkY5/3/

attention cependant que le init soit lancé dans le onload ...
25/03/2014, 13h57
benjea06

SpaceFrog,

Avec un peu de recherche j'ai trouvé où mettre le onload et ça marche.:)
Merci.
Ce qui m’intéresse particulièrement, c'est que, par défaut les dates soient classées en ordre descendant même s'il n'y a pas de bouton de tri.

D'autre part, serait-ce compliqué de laisser les dates dans un TD différent du libellé de document?
25/03/2014, 14h06
SpaceFrog

Il te suffit de lancer la fonction de tri sur le onload ...

après pour les td séparés, à partir du moment ou tu recupères bien le bon contenu ...
http://jsfiddle.net/thkY5/5/
25/03/2014, 14h30
benjea06

Merci!
Ca marche parfaitement.
En revanche, je n'ai pas trouvé sur le net comment faire un tri sur onload...

fais le à la fin du init ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function init() {
    document.getElementById('asc').addEventListener('click', function () {
        sortTable('asc')
    })
    document.getElementById('desc').addEventListener('click', function () {
        sortTable('desc')
    })
 
//tri au chargement
  sortTable('desc')
 
}

25/03/2014, 15h31
benjea06

Je mets quoi?
Je n'ai pas trouvé la commande...
:(
25/03/2014, 15h39
SpaceFrog

relis bien le message précédent ...
25/03/2014, 16h05
benjea06

Je n'avais pas vu la nuance!
:)

Testé sur ma page= GE......NIAL!
Un grand merci.
C'est exactement ce que je cherche depuis plusieurs jours.

Cerise sur le gâteau, si j'envisageais d'imposer ce tri et aucun autre, serait-il possible de supprimer les boutons?
25/03/2014, 16h14
SpaceFrog

heu ???
si tu ne veux pas de boutons, ne les mets pas ... :koi:

vire également l'attribution des clicks ...
26/03/2014, 15h55
benjea06

Citation:

Envoyé par SpaceFrog

heu ???
si tu ne veux pas de boutons, ne les mets pas ... :koi:

vire également l'attribution des clicks ...

On se moque pas! :)
J'avais essayer de virer les input mais ça ne l'a pas fait.
Je teste et reviens vers vous.

Pour le reste, ça fonctionne parfaitement sur Firefox mais pas sur IE.
Une petit modif à faire?
26/03/2014, 16h05
SpaceFrog

http://jsfiddle.net/thkY5/6/

teste aussi sous IE