Tableau trié par date seulement

**benjea06** · 22/03/2014, 09h05

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.

**NoSmoking** · 22/03/2014, 16h33

Bonjour,

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.

**benjea06** · 22/03/2014, 18h23

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 html :

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

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 :

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
<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 html :

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
<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>

**NoSmoking** · 23/03/2014, 08h39

Code :

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

function TableOrder(e,Dec)  //Dec= 0:Croissant, 1:Décroissant

**benjea06** · 23/03/2014, 13h08

Quoi? c'est pas bon?

En fait ce script me conviendrait bien s'il imposait le tri par date décroissante par défaut.

**NoSmoking** · 23/03/2014, 15h06

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.

**benjea06** · 23/03/2014, 19h12

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?

**NoSmoking** · 24/03/2014, 21h21

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 :

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

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 :

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

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

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

Code html :

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

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

**benjea06** · 25/03/2014, 09h12

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?

**SpaceFrog** · 25/03/2014, 09h37

Edit:

Petite rectification sur les codes précédents

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

(exclusion du match [0])

**benjea06** · 25/03/2014, 12h12

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

Html

Code html :

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
<!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 :

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
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();

**SpaceFrog** · 25/03/2014, 12h48

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

attention cependant que le init soit lancé dans le onload ...

**benjea06** · 25/03/2014, 13h57

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?

**SpaceFrog** · 25/03/2014, 14h06

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/

**benjea06** · 25/03/2014, 14h30

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

**SpaceFrog** · 25/03/2014, 14h51

fais le à la fin du init ...

Code :

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

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')
 
}

**benjea06** · 25/03/2014, 15h31

Je mets quoi?
Je n'ai pas trouvé la commande...

**SpaceFrog** · 25/03/2014, 15h39

relis bien le message précédent ...

**benjea06** · 25/03/2014, 16h05

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?

**SpaceFrog** · 25/03/2014, 16h14

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

vire également l'attribution des clicks ...

Tableau trié par date seulement

JavaScript

Discussions similaires

Partager

Partager