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.

Tableau trié par date seulement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager