Séparer entètes et tableau

Version imprimable

Bonsoir à tous,

J'ai fait un tri dynamique de tableau HTML avec le DOM

Mon tableau s'affiche dans un div avec un overflow

Quand le nombre de lignes du tableau dépasse la hauteur
imposée par le div, en jouant avec l'ascensseur la ligne
d'entète disparait dans le haut de la liste, et par le
fait on ne vois plus le nom des colonnes et donc plus
de possibilité d'effectuer un tri.

Je vous propose mon source pour que vous puissiez me
dire si ce que je voudrais faire est possible et si oui, comment ?

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
<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>
 
<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>
 
<body>    
<p>&nbsp;</p>
<p>&nbsp;</p>
<center>
<div align="center" style="height:100px; width:340px; overflow:auto; font-family: Times New Roman; font-size: 10px">
<table id=trier align="center">
	<tr class=title>
		<td>Chevaux <span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Date	<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Age		<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Ind		<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
	</tr>
	<tr><td style="text-align: left"><a id="aff2" class="tt2">&nbsp;TORNADE DU 
		DECLIC&nbsp;&nbsp; </a></td><td>&nbsp;20/03/2005&nbsp;</td><td>4</td><td id=money>127.1 </td></tr>
	<tr><td style="text-align: left"><a id="aff3" class="tt2">&nbsp;PITCHPIN DES 
		BOIS</a></td><td>&nbsp;22/02/2005&nbsp;</td><td> 3</td><td id=money>127.8</td></tr>
	<tr><td style="text-align: left"><a id="aff4" class="tt2">&nbsp;RENATE DES 
		LANDES</a></td><td>&nbsp;23/02/2005&nbsp;</td><td>7</td><td id=money>128.2</td>	</tr>
	<tr><td style="text-align: left"><a id="aff5" class="tt2">&nbsp;MIGUEL DES 
		VOLOS</a></td><td>&nbsp;23/05/2005&nbsp;</td><td>6</td><td id=money>129.6</td></tr>
	<tr><td style="text-align: left"><a id="aff6" class="tt2">&nbsp;NIKY DU 
		DONJON</a></td><td>&nbsp;23/02/2006&nbsp;</td><td>5</td><td id=money>131.3</td></tr>
	<tr><td style="text-align: left"><a id="aff6" class="tt2">&nbsp;NIKY DU 
		GOLF</a></td><td>&nbsp;23/02/2005&nbsp;</td><td>5</td><td id=money>128.6</td></tr>
 
</table>
</div>
</body>
</html>

J'ai fait les modifications suivantes :

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
 
<table id=trierrr align="center">
	<tr class=title>
		<td>Chevaux <span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Date	<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Age		<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Ind		<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
	</tr>
 
</table>
 
<div align="center" style="height:100px; width:340px; overflow:auto; font-family: Times New Roman; font-size: 10px">
 
<!--
<table id=xtrier align="center">
	<tr class=xtitle>
		<td>Chevaux <span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Date	<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Age		<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
		<td>Ind		<span onclick=TableOrder(event,1)>▼</span><span onclick=TableOrder(event,0)>▲</span></td>
	</tr>
-->	
<table>
	<tr><td style="text-align: left"><a id="aff2" class="tt2">&nbsp;TORNADE DU 
		DECLIC&nbsp;&nbsp; </a></td><td>&nbsp;20/03/2005&nbsp;</td><td>4</td><td id=money>127.1 </td></tr>
	<tr><td style="text-align: left"><a id="aff3" class="tt2">&nbsp;PITCHPIN DES

Mais la, j'ai une erreur dans la partie javascript :
oCell=oCell.parentNode a la valeur null

Je ne m'en sort pas , si vous avez une idée !

20/02/2010, 08h55
SpaceFrog

Je crois qu'une bonne idée serait d'aller farfouiller dans les contributions, j'y ai déposé il y a quelques années un code pour des entêtes fixes ...

http://www.developpez.net/forums/d14...ce/#post673681

Citation:

17/02/2006, 10h50

Bonsoir SpaceFrog,

J'ai été fouiller dans les contributions, mais cela
correspondait a ce que je recherchai avant !

Bref, de mon côté, j'ai bien avancé

Donc mon entête est bien séparée de la table
en cliquant dans les flèches des entêtes, la table se trie.

J'ai a peut près réussi a faire tourner le programme
mais il y a un comportement bizare dans les tris.

Si on clique sur la flèche vers le bas, le tri commence a la ligne 3 de la table et

Si on clique sur la flèche vers le haut, le tri commence a la ligne 2 de la table !!!

J'ai cafouillé dessus toute la journée mais sans résultats.
Voici le source (mon soucis te paraitra peut-être évident !) :

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<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 }
#trier TD { BORDER:white 1px solid; }
BODY { background-color:#FFF5E5;}
</STYLE>
 
<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( col_, Dec)
{ //---- Détermine : oCell(cellule) oTable(table) index(index cellule) -----//
var oTable = document.getElementById('T_DATA'); 
var index = col_;
	var FntSort = new Array()
 //---- 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>
 
<body>    
<p>&nbsp;</p>
<p>&nbsp;</p>
<center>
<div align="center">
<table id=trier style="border-color: #000000">
	<tr class=title>
		<td width="200">Chevaux <span onclick=TableOrder(0,1)>▼</span><span onclick=TableOrder(0,0)>▲</span></td>
		<td width="80">Date		<span onclick=TableOrder(1,1)>▼</span><span onclick=TableOrder(1,0)>▲</span></td>
		<td width="60">Age		<span onclick=TableOrder(2,1)>▼</span><span onclick=TableOrder(2,0)>▲</span></td>
		<td width="60">Ind		<span onclick=TableOrder(3,1)>▼</span><span onclick=TableOrder(3,0)>▲</span></td>
		<td width="15"></td>
	</tr>
 
</table>
</div>
<div align="center" style="height:100px; width:431px; overflow:auto; font-family: Times New Roman; font-size: 10px">
<table id="T_DATA" border="1" style="border-collapse: collapse" bordercolor="#000000">
	<tr><td width="200" style="text-align: left"><a id="aff2" class="tt2">&nbsp;TORNADE DU 
		DECLIC&nbsp;&nbsp; </a></td ><td width="80" >&nbsp;20/03/2005&nbsp;</td>
		<td width="60" align="center">4</td><td width="60" id=money align="center">127.1 </td></tr>
	<tr><td style="text-align: left"><a id="aff3" class="tt2">&nbsp;PITCHPIN DES 
		BOIS</a></td><td>&nbsp;22/02/2005&nbsp;</td><td align="center"> 3</td>
		<td id=money align="center">127.8</td></tr>
	<tr><td style="text-align: left"><a id="aff3" class="tt2">&nbsp;PITCHPIN DES 
		BOIS</a></td><td>&nbsp;22/04/2005&nbsp;</td><td align="center"> 3</td>
		<td id=money align="center">127.3</td></tr>
	<tr><td style="text-align: left"><a id="aff4" class="tt2">&nbsp;RENATE DES 
		LANDES</a></td><td>&nbsp;23/02/2005&nbsp;</td><td align="center">7</td>
		<td id=money align="center">128.2</td>	</tr>
	<tr><td style="text-align: left"><a id="aff5" class="tt2">&nbsp;MIGUEL DES 
		VOLOS</a></td><td>&nbsp;23/05/2005&nbsp;</td><td align="center">6</td>
		<td id=money align="center">129.6</td></tr>
	<tr><td style="text-align: left"><a id="aff6" class="tt2">&nbsp;NIKY DU 
		DONJON</a></td><td>&nbsp;23/02/2006&nbsp;</td><td align="center">5</td>
		<td id=money align="center">131.3</td></tr>
	<tr><td style="text-align: left"><a id="aff6" class="tt2">&nbsp;NIKY DU 
		GOLF</a></td><td>&nbsp;23/02/2005&nbsp;</td><td align="center">5</td>
		<td id=money align="center">128.6</td></tr>
</table>
</div>
</body>
</html>

En espérant qu'un débuggage soit possible

Rebonjour,

J'ai encore bossé sur le source,

Maintenant, sur les colonnes Age et Ind, le tri
s'éffectue bien sauf sur la dernière ligne de la table.

Pour la date et les chevaux c'est le foutoir.

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<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 }
#trier TD { BORDER:white 1px solid; }
BODY { background-color:#FFF5E5;}
</STYLE>
 
<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( col_, Dec)
function TableOrder( Dec)
 
{ //---- Détermine : oCell(cellule) oTable(table) index(index cellule) -----//
var oTable = document.getElementById('T_DATA'); 
//**var index = col_;
var index = Dec;
	var FntSort = new Array()
 //---- Copier Tableau Html dans Table JavaScript ----//
	var Table = new Array()
	for(r=0;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[0].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=0;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 1: Table[r-1][c]=parseFloat(objet.replace(/[^0-9.-]/g,'')); alert(Table[r-1][c]); 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]);
//alert(index); // = Le N° de la colonne	
	if(Dec) Table.reverse();
 
 //---- Copier Table JavaScript dans Tableau Html ----//
// alert(oTable.rows[0].cells.length); 			// = Nombre de colonnes
// alert(oTable.rows.length); 					// = Nombre de lignes
	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-1].cells[c].innerHTML=Table[r-1][c+oTable.rows[0].cells.length];  
}
</SCRIPT>
 
<body>    
<p>&nbsp;</p>
<p>&nbsp;</p>
<center>
<div align="center">
<table id=trier style="border-color: #000000">
	<tr class=title>
		<td width="200">Chevaux <span onclick="TableOrder(0)">▼</span>
		<td width="80" >Date	<span onclick="TableOrder(1)">▼</span>
		<td width="60" >Age		<span onclick="TableOrder(2)">▼</span>
		<td width="60" >Ind		<span onclick="TableOrder(3)">▼</span>
		<td width="15"></td>
	</tr>
 
</table>
</div>
<div align="center" style="height:154px; width:431px; overflow:auto; font-family: Times New Roman; font-size: 10px">
<table id="T_DATA" border="1" style="border-collapse: collapse" bordercolor="#000000">
 
	<tr><td width="200" style="text-align: left"><a id="aff1" class="tt1">&nbsp;AAAAAAAAAA</a></td >
		<td width="80" >&nbsp;01/01/2001&nbsp;</td>
		<td width="60" align="center">1</td><td width="60" id=money align="center">111.1 </td></tr>
 
	<tr><td style="text-align: left"><a id="aff2" class="tt2">&nbsp;BBBBBBBBBB</a></td>
		<td>&nbsp;02/02/2002&nbsp;</td><td align="center">2</td>
		<td id=money align="center">222.2</td></tr>
 
	<tr><td style="text-align: left"><a id="aff3" class="tt3">&nbsp;CCCCCCCCCC</a></td>
		<td>&nbsp;03/03/2003&nbsp;</td><td align="center">3</td>
		<td id=money align="center">333.3</td></tr>
 
	<tr><td style="text-align: left"><a id="aff4" class="tt4">&nbsp;DDDDDDDDDD</a></td>
		<td>&nbsp;04/04/2004&nbsp;</td><td align="center">4</td>
		<td id=money align="center">444.4</td>	</tr>
 
	<tr><td style="text-align: left"><a id="aff5" class="tt5">&nbsp;EEEEEEEEEE</a></td>
		<td>&nbsp;05/05/2005&nbsp;</td><td align="center">5</td>
		<td id=money align="center">555.5</td></tr>
 
	<tr><td style="text-align: left"><a id="aff6" class="tt6">&nbsp;FFFFFFFFFF</a></td>
		<td>&nbsp;06/06/2006&nbsp;</td><td align="center">6</td>
		<td id=money align="center">666.6</td></tr>
 
	<tr><td style="text-align: left"><a id="aff7" class="tt7">&nbsp;GGGGGGGGGG</a></td>
		<td>&nbsp;07/07/2007&nbsp;</td><td align="center">7</td>
		<td id=money align="center">777.7</td></tr>
</table>
</div>
</body>
</html>

Petite précision, je suis sous Internet Explorer.