Tri dynamique table HTML

**totofe** · 18/06/2009, 12h32

Bonjour,

J'essaye depuis pas mal de temps de réaliser un tri en javascript. J'ai regardé sur le net y avait pas mal de fonctions. Le souci c'est que pour les utiliser il faut que la table soit créé au chargement de la page. Hors moi je le créé à l'aide d'une fonction ajax. Je voudrais une fonction javascript qui tri par ordre croissant ou décroissant une colonne quand on click sur l'entête.
Ou pourrai-je les trouver?

Merci

**le_chomeur** · 18/06/2009, 13h35

je pense que ton problème vient de ton utilisation plutôt que des méthodes de tri elle même ...
un exemple concret :http://www.kryogenix.org/code/browser/sorttable/

il ne te reste plus qu'a initialiser la méthode de tri au chargement de tes données

**totofe** · 18/06/2009, 15h01

Merci,

J'ai déjà vu cette page ainsi qu'un tas d'autre similaire qui consiste à affecter une class aux entêtes. J'ai aussi vu la méthode qui permet d'utiliser le prototype.js.
Mais celles-ci ne me convient pas car lors du chargement de ma page la table n'existe pas.
Je la créer en cliquant sur un bouton et j'aimerai juste avoir la fonction qui permet de trié par ordre croissant et décroissant en lui passant en paramètre la colonne et l'idée de la table. que j'affecte aux entête avec l'événement onclick.

**le_chomeur** · 18/06/2009, 15h12

il ne te reste plus qu'a initialiser la méthode de tri au chargement de tes données

. . . :-)

après avoir chargé tes données via ajax, tu appels la méthode d'initialisation de tri dans l'autre sens tu comprends mieux ????

**totofe** · 18/06/2009, 15h51

Oui j'y est pensé, mais j'y suis pas parvenu ^^. je doit pas être assez doué.

Je vois pas trop comment initialisé la méthode?

Je suis complètement largué dans tout ce code.

**Auteur** · 18/06/2009, 16h40

http://www.developpez.net/forums/d64...u/#post3817282

**totofe** · 18/06/2009, 17h26

Je galère toujours l'initialiser.

J'ai mis les 2 script javascript sur mon répertoire et je les ai ajouter dans mon fichier php.
Ensuite dans ma fonction AJAX à la fin je fait appel a initSortTable().
Et dans ma table j'ai ajouter onclick='sortColumn(event)'.

Mais ça marche toujours pas

ps: A choisir j'aimerai bien utilisé ce tri: http://www.javascripttoolbox.com/lib/table/examples.php car il permet aussi de faire des filtres.

Quelqu'un pourrait m'aider à l'initialiser? (si c'est pas possible j'en prendrai une autre)

**Auteur** · 18/06/2009, 19h03

Tu nous postes ton code histoire de voir où ça coince ?

**totofe** · 18/06/2009, 22h25

Ok je le posterai demain matin vers 9h30.

**totofe** · 19/06/2009, 09h42

Ma page index.php j'ai enlevé tous ce qui était inutile

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script type="text/javascript" src="fonction/fonction.js"> </script>
<script type="text/javascript" src="fx/mootools.js"></script>
<script type="text/javascript" src="fx/slide_base.js"> </script>
	<script type="text/javascript" src="fonction/tablesort.js"></script>
<script type="text/javascript" src="patchIE.js"></script> 
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
    <title>
    Equinoxe Web Monitoring
    </title>
    <link rel="stylesheet" type="text/css" href="monitoring.css" />
    <link rel="icon" type="image/jpg" href="images/favicon.jpg" />
  </head>
<?php
   echo "<body onLoad='affiBases()'>";
 echo "<img id='detail class='img_detail' src='images/detail.png' alt='Detail' title='Detail' onclick='detail_base(1)' />";
      
   echo "<div id='div_detail_base' ></div>";
   echo "</body>";
?>
</html>

Ma fonction javascript

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
 
function getXhr() //fonction creation des httprequest pour l'ajax
{
  var xhr = null;  
  if(window.ActiveXObject) 
  {
    try { 
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  else
  {
    if(window.XMLHttpRequest) xhr = new XMLHttpRequest();
    else 
      {
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest, veuillez le mettre à jour");
        xhr = false;
      }
  }
  return xhr
} 
 
function detail_base(num_base)
{
  var xhr=getXhr(); 
  xhr.onreadystatechange = function() 
  { 
    if(xhr.readyState == 4 && xhr.status == 200)
    { 
      document.getElementById('div_detail_base').innerHTML = xhr.responseText;
      initSortTable();
    }
  }
  xhr.open("POST",'fonction/detail_base.php',true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
  xhr.send("base="+num_base);   
}

et mon fichier detail_base.php

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
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<?php
session_start();
include '../config.php';
$connection = mysql_connect($sql['host'],$sql['user'],$sql['password']);
if ( ! $connection )
  die ("connection impossible"); 
mysql_select_db($sql['base']) or die ("pas de connection"); 
  
$fin="\\";
if(isset($_POST['base']))
{
  $requete="SELECT idBase_eqx as idBase, ip, port, nom_client FROM base_eqx b WHERE idbase_eqx=".$_POST['base']; 
  $res=mysql_query($requete,$connection); // envoi de la requête
  if($r = mysql_fetch_array($res))
  {  
    if(equinoxeIsAlive($r['ip'],$r['port']))
    {
      echo "<div id='tableau_detail'>";
      echo "<table id='table_detail_base'  onclick='sortColumn(event)'>";
      echo "<thead id='thead_detail_base'><tr><th class='entete_table_detail' id='nom_pro_table_detail'>Nom procecessus</th><th class='entete_table_detail' id='date_table_detail'>Date</th><th class='entete_table_detail' id='debut_table_detail'>D&eacute;but</th><th class='entete_table_detail' id='statut_table_detail'>Statut</th><th class='entete_table_detail' id='num_table_detail'>Num proc</th><th class='entete_table_detail' id='utilisateur_table_detail'>Nom utilisateur</th><th class='entete_table_detail' id='nb_ligne_table_detail'>Nb ligne</th></tr></thead>";
      $rep=equinoxe_data_EXPLIS("EXPLIS".$fin,$r['ip'],$r['port']);
      $lignes=explode("\n",$rep);
      echo "<tbody id='tbody_detail_base'>";
      foreach($lignes as $ligne)
      {
        echo "<tr>";
        $cel=strtok($ligne,"\t");
        echo "<td class='cel_table_detail'>".$cel."</td>";  
        $cel=strtok(".");    
        echo "<td class='cel_table_detail date_cel_table_detail'>".$cel."</td>"; 
        $cel=strtok("\t");
        echo "<td class='cel_table_detail debut_cel_table_detail'>".$cel."</td>"; 
        $cel=strtok("\t");
        echo "<td class='cel_table_detail statut_cel_table_detail'>".$cel."</td>"; 
        $cel=strtok("\t");
        echo "<td class='cel_table_detail num_pro_cel_table_detail'>".$cel."</td>"; 
        $cel=strtok("\t");
        echo "<td class='cel_table_detail utilisateur_cel_table_detail'>".$cel."</td>"; 
        $cel=strtok("\t");
        echo "<td class='cel_table_detail nb_ligne_cel_table_detail'>".$cel."</td>";  
        echo "</tr>";
      
      }
      echo "</tbody>";
      echo "</table>";
      echo "</div>";
      equinoxe_data("-1$fin",$r['ip'],$r['port']);
    }
    else
    {
      echo "connexion imposible";
    }
    echo "<INPUT type='button' id='bouton_fermer_detail' value='Fermer' onclick='disparaitre();' />";
  }
}
 mysql_close($connection); 
?>

Je vois pas trop comment faire.

**le_chomeur** · 19/06/2009, 10h06

pas de code php !

et ej t'ai répondu a plusieurs reprise !!!
une fois ton tableau chargé en ajax, tu appels la méthode d'instanciation de tri ... la si tu en comprends pas , on ne peut pas le faire pour toi

**totofe** · 19/06/2009, 10h10

pas de code php !

Désoler

tu appels la méthode d'instanciation de tri

C'est ce que j'essaye de faire

c'est bien dans ma fonction javascript que je doit le faire

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
function detail_base(num_base)
{
  var xhr=getXhr(); 
  xhr.onreadystatechange = function() 
  { 
    if(xhr.readyState == 4 && xhr.status == 200)
    { 
      document.getElementById('div_detail_base').innerHTML = xhr.responseText;
      initSortTable(); //     <===========  ICI
    }
  }
  xhr.open("POST",'fonction/detail_base.php',true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
  xhr.send("base="+num_base);   
}

**le_chomeur** · 19/06/2009, 10h22

exactement a ce moment la

**totofe** · 19/06/2009, 10h27

ça me rassure pas ^^. Car c'est bien ce que j'ai fait et la fonction ne marche toujours pas

**le_chomeur** · 19/06/2009, 10h37

montres nous le code HTML du tableau d'un coté
et la méthode javascript de tri initSortTable();

**totofe** · 19/06/2009, 10h45

c'est la fonction que Auteur m'a envoyé:

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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
var dom = (document.getElementsByTagName) ? true : false;
var ie5 = (document.getElementsByTagName && document.all) ? true : false;
var arrowUp, arrowDown;
 
if (ie5 || dom)
	initSortTable();
 
function initSortTable() {
	arrowUp = document.createElement("SPAN");
	var tn = document.createTextNode("5");
	arrowUp.appendChild(tn);
	arrowUp.className = "arrow";
 
	arrowDown = document.createElement("SPAN");
	var tn = document.createTextNode("6");
	arrowDown.appendChild(tn);
	arrowDown.className = "arrow";
}
 
 
 
function sortTable(tableNode, nCol, bDesc, sType) {
	var tBody = tableNode.tBodies[0];
	var trs = tBody.rows;
	var trl= trs.length;
	var a = new Array();
 
	for (var i = 0; i < trl; i++) {
		a[i] = trs[i];
	}
 
	var start = new Date;
	window.status = "Sorting data...";
	a.sort(compareByColumn(nCol,bDesc,sType));
	window.status = "Sorting data done";
 
	for (var i = 0; i < trl; i++) {
		tBody.appendChild(a[i]);
		window.status = "Updating row " + (i + 1) + " of " + trl +
						" (Time spent: " + (new Date - start) + "ms)";
	}
 
	// check for onsort
	if (typeof tableNode.onsort == "string")
		tableNode.onsort = new Function("", tableNode.onsort);
	if (typeof tableNode.onsort == "function")
		tableNode.onsort();
}
 
function CaseInsensitiveString(s) {
	return String(s).toUpperCase();
}
 
function parseDate(s) {
	return Date.parse(s.replace(/\-/g, '/'));
}
 
/* alternative to number function
 * This one is slower but can handle non numerical characters in
 * the string allow strings like the follow (as well as a lot more)
 * to be used:
 *    "1,000,000"
 *    "1 000 000"
 *    "100cm"
 */
 
function toNumber(s) {
    return Number(s.replace(/[^0-9\.]/g, ""));
}
 
function compareByColumn(nCol, bDescending, sType) {
	var c = nCol;
	var d = bDescending;
 
	var fTypeCast = String;
 
	if (sType == "Number")
		fTypeCast = Number;
	else if (sType == "Date")
		fTypeCast = parseDate;
	else if (sType == "CaseInsensitiveString")
		fTypeCast = CaseInsensitiveString;
 
	return function (n1, n2) {
		if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c])))
			return d ? -1 : +1;
		if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c])))
			return d ? +1 : -1;
		return 0;
	};
}
 
function sortColumnWithHold(e) {
	// find table element
	var el = ie5 ? e.srcElement : e.target;
	var table = getParent(el, "TABLE");
 
	// backup old cursor and onclick
	var oldCursor = table.style.cursor;
	var oldClick = table.onclick;
 
	// change cursor and onclick	
	table.style.cursor = "wait";
	table.onclick = null;
 
	// the event object is destroyed after this thread but we only need
	// the srcElement and/or the target
	var fakeEvent = {srcElement : e.srcElement, target : e.target};
 
	// call sortColumn in a new thread to allow the ui thread to be updated
	// with the cursor/onclick
	window.setTimeout(function () {
		sortColumn(fakeEvent);
		// once done resore cursor and onclick
		table.style.cursor = oldCursor;
		table.onclick = oldClick;
	}, 100);
}
 
function sortColumn(e) {
	var tmp = e.target ? e.target : e.srcElement;
	var tHeadParent = getParent(tmp, "THEAD");
	var el = getParent(tmp, "TD");
 
	if (tHeadParent == null)
		return;
 
	if (el != null) {
		var p = el.parentNode;
		var i;
 
		// typecast to Boolean
		el._descending = !Boolean(el._descending);
 
		if (tHeadParent.arrow != null) {
			if (tHeadParent.arrow.parentNode != el) {
				tHeadParent.arrow.parentNode._descending = null;	//reset sort order		
			}
			tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
		}
 
		if (el._descending)
			tHeadParent.arrow = arrowUp.cloneNode(true);
		else
			tHeadParent.arrow = arrowDown.cloneNode(true);
 
		el.appendChild(tHeadParent.arrow);
 
 
 
		// get the index of the td
		var cells = p.cells;
		var l = cells.length;
		for (i = 0; i < l; i++) {
			if (cells[i] == el) break;
		}
 
		var table = getParent(el, "TABLE");
		// can't fail
 
		sortTable(table,i,el._descending, el.getAttribute("type"));
	}
}
 
 
function getInnerText(el) {
	if (ie5) return el.innerText;	//Not needed but it is faster
 
	var str = "";
 
	var cs = el.childNodes;
	var l = cs.length;
	for (var i = 0; i < l; i++) {
		switch (cs[i].nodeType) {
			case 1: //ELEMENT_NODE
				str += getInnerText(cs[i]);
				break;
			case 3:	//TEXT_NODE
				str += cs[i].nodeValue;
				break;
		}
 
	}
 
	return str;
}
 
function getParent(el, pTagName) {
	if (el == null) return null;
	else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())	// Gecko bug, supposed to be uppercase
		return el;
	else
		return getParent(el.parentNode, pTagName);
}

et mon table en HTML me renvoi:

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
 
<table id="table_detail_base"  onclick="sortColumn(event)">
  <thead id="thead_detail_base">
  <tr>
    <th class="entete_table_detail" id="nom_pro_table_detail">Nom procecessus</th>
    <th class="entete_table_detail" id="date_table_detail">Date</th>
    <th class="entete_table_detail" id="debut_table_detail">Début</th>
    <th class="entete_table_detail" id="statut_table_detail">Statut</th>
    <th class="entete_table_detail" id="num_table_detail">Num proc</th>
    <th class="entete_table_detail" id="utilisateur_table_detail">Nom utilisateur</th>
    <th class="entete_table_detail" id="nb_ligne_table_detail">Nb ligne</th>    
  </tr>
  </thead>
  <tbody id="tbody_detail_base">
  <tr>
    <td class="cel_table_detail">anni200705.IUP</td>
    <td class="cel_table_detail date_cel_table_detail">2007-04-11</td>
    <td class="cel_table_detail debut_cel_table_detail">11:09:52</td>
    <td class="cel_table_detail statut_cel_table_detail">0</td>
    <td class="cel_table_detail num_pro_cel_table_detail">7361</td>
    <td class="cel_table_detail utilisateur_cel_table_detail">0</td>
    <td class="cel_table_detail nb_ligne_cel_table_detail">7459</td>
  </tr>
  <tr>
     <td class="cel_table_detail">anni200706.IUP</td>
     <td class="cel_table_detail date_cel_table_detail">2007-04-11</td>
     <td class="cel_table_detail debut_cel_table_detail">11:09:52</td>
     <td class="cel_table_detail statut_cel_table_detail">3</td>
     <td class="cel_table_detail num_pro_cel_table_detail">9658</td>
     <td class="cel_table_detail utilisateur_cel_table_detail">1</td>
     <td class="cel_table_detail nb_ligne_cel_table_detail">2000</td>
   </tr>
  </tbody>
</table>

ps: si la fonction de auteur convient pas, je suis preneur de toute autre posibilité!

**le_chomeur** · 19/06/2009, 11h12

initSortTable() ne fait que créer 2 span :-/

de plus ton tableau a déja la méthode sortColomun implémentée
pas placé au bon endroit , et enfin des id que tu as mis n'importe ou

voici un exemple corigé , implémenté sur la première colonne

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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
		<script type="text/javascript">
 
			var dom = (document.getElementsByTagName) ? true : false;
var ie5 = (document.getElementsByTagName && document.all) ? true : false;
var arrowUp, arrowDown;
 
if (ie5 || dom)
	initSortTable();
 
function initSortTable() {
	arrowUp = document.createElement("SPAN");
	var tn = document.createTextNode("5");
	arrowUp.appendChild(tn);
	arrowUp.className = "arrow";
 
	arrowDown = document.createElement("SPAN");
	var tn = document.createTextNode("6");
	arrowDown.appendChild(tn);
	arrowDown.className = "arrow";
}
 
 
 
function sortTable(tableNode, nCol, bDesc, sType) {
	var tBody = tableNode.tBodies[0];
	var trs = tBody.rows;
	var trl= trs.length;
	var a = new Array();
 
	for (var i = 0; i < trl; i++) {
		a[i] = trs[i];
	}
 
	var start = new Date;
	window.status = "Sorting data...";
	a.sort(compareByColumn(nCol,bDesc,sType));
	window.status = "Sorting data done";
 
	for (var i = 0; i < trl; i++) {
		tBody.appendChild(a[i]);
		window.status = "Updating row " + (i + 1) + " of " + trl +
						" (Time spent: " + (new Date - start) + "ms)";
	}
 
	// check for onsort
	if (typeof tableNode.onsort == "string")
		tableNode.onsort = new Function("", tableNode.onsort);
	if (typeof tableNode.onsort == "function")
		tableNode.onsort();
}
 
function CaseInsensitiveString(s) {
	return String(s).toUpperCase();
}
 
function parseDate(s) {
	return Date.parse(s.replace(/\-/g, '/'));
}
 
/* alternative to number function
 * This one is slower but can handle non numerical characters in
 * the string allow strings like the follow (as well as a lot more)
 * to be used:
 *    "1,000,000"
 *    "1 000 000"
 *    "100cm"
 */
 
function toNumber(s) {
    return Number(s.replace(/[^0-9\.]/g, ""));
}
 
function compareByColumn(nCol, bDescending, sType) {
	var c = nCol;
	var d = bDescending;
 
	var fTypeCast = String;
 
	if (sType == "Number")
		fTypeCast = Number;
	else if (sType == "Date")
		fTypeCast = parseDate;
	else if (sType == "CaseInsensitiveString")
		fTypeCast = CaseInsensitiveString;
 
	return function (n1, n2) {
		if (fTypeCast(getInnerText(n1.cells[c])) < fTypeCast(getInnerText(n2.cells[c])))
			return d ? -1 : +1;
		if (fTypeCast(getInnerText(n1.cells[c])) > fTypeCast(getInnerText(n2.cells[c])))
			return d ? +1 : -1;
		return 0;
	};
}
 
function sortColumnWithHold(e) {
	// find table element
	var el = ie5 ? e.srcElement : e.target;
	var table = getParent(el, "TABLE");
 
	// backup old cursor and onclick
	var oldCursor = table.style.cursor;
	var oldClick = table.onclick;
 
	// change cursor and onclick	
	table.style.cursor = "wait";
	table.onclick = null;
 
	// the event object is destroyed after this thread but we only need
	// the srcElement and/or the target
	var fakeEvent = {srcElement : e.srcElement, target : e.target};
 
	// call sortColumn in a new thread to allow the ui thread to be updated
	// with the cursor/onclick
	window.setTimeout(function () {
		sortColumn(fakeEvent);
		// once done resore cursor and onclick
		table.style.cursor = oldCursor;
		table.onclick = oldClick;
	}, 100);
}
 
function sortColumn(e) {
 
	var tmp = e.target ? e.target : e.srcElement;
	var tHeadParent = getParent(tmp, "THEAD");
	var el = getParent(tmp, "TH");
 
	if (tHeadParent == null)
		return;
	if (el != null) {
		var p = el.parentNode;
		var i;
 
		// typecast to Boolean
		el._descending = !Boolean(el._descending);
 
		if (tHeadParent.arrow != null) {
			if (tHeadParent.arrow.parentNode != el) {
				tHeadParent.arrow.parentNode._descending = null;	//reset sort order		
			}
			tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
		}
 
		if (el._descending)
			tHeadParent.arrow = arrowUp.cloneNode(true);
		else
			tHeadParent.arrow = arrowDown.cloneNode(true);
 
		el.appendChild(tHeadParent.arrow);
 
 
 
		// get the index of the td
		var cells = p.cells;
		var l = cells.length;
		for (i = 0; i < l; i++) {
			if (cells[i] == el) break;
		}
 
		var table = getParent(el, "TABLE");
		// can't fail
 
		sortTable(table,i,el._descending, el.getAttribute("type"));
	}
}
 
 
function getInnerText(el) {
	if (ie5) return el.innerText;	//Not needed but it is faster
 
	var str = "";
 
	var cs = el.childNodes;
	var l = cs.length;
	for (var i = 0; i < l; i++) {
		switch (cs[i].nodeType) {
			case 1: //ELEMENT_NODE
				str += getInnerText(cs[i]);
				break;
			case 3:	//TEXT_NODE
				str += cs[i].nodeValue;
				break;
		}
 
	}
 
	return str;
}
 
function getParent(el, pTagName) {
	if (el == null) return null;
	else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())	// Gecko bug, supposed to be uppercase
		return el;
	else
		return getParent(el.parentNode, pTagName);
}
		</script>
 
<table>
  <thead id="thead_detail_base">
  <tr>
    <th class="entete_table_detail" id="nom_pro_table_detail" onclick="sortColumn(event)">Nom procecessus</th>
    <th class="entete_table_detail" id="date_table_detail">Date</th>
    <th class="entete_table_detail" id="debut_table_detail">Début</th>
    <th class="entete_table_detail" id="statut_table_detail">Statut</th>
    <th class="entete_table_detail" id="num_table_detail">Num proc</th>
    <th class="entete_table_detail" id="utilisateur_table_detail">Nom utilisateur</th>
    <th class="entete_table_detail" id="nb_ligne_table_detail">Nb ligne</th>    
  </tr>
  </thead>
  <tbody>
  <tr>
    <td class="cel_table_detail">anni200705.IUP</td>
    <td class="cel_table_detail date_cel_table_detail">2007-04-11</td>
    <td class="cel_table_detail debut_cel_table_detail">11:09:52</td>
    <td class="cel_table_detail statut_cel_table_detail">0</td>
    <td class="cel_table_detail num_pro_cel_table_detail">7361</td>
    <td class="cel_table_detail utilisateur_cel_table_detail">0</td>
    <td class="cel_table_detail nb_ligne_cel_table_detail">7459</td>
  </tr>
  <tr>
     <td class="cel_table_detail">anni200706.IUP</td>
     <td class="cel_table_detail date_cel_table_detail">2007-04-11</td>
     <td class="cel_table_detail debut_cel_table_detail">11:09:52</td>
     <td class="cel_table_detail statut_cel_table_detail">3</td>
     <td class="cel_table_detail num_pro_cel_table_detail">9658</td>
     <td class="cel_table_detail utilisateur_cel_table_detail">1</td>
     <td class="cel_table_detail nb_ligne_cel_table_detail">2000</td>
   </tr>
  </tbody>
</table>		
	</body>
</html>

**totofe** · 19/06/2009, 11h26

ça marche!!!!

Tu as changé quoi? Car dans le fichier que auteur ma envoyé la méthode onclick est bien affecté au table.

En tout cas merci beaucoup

Edit: D'ailleurs ça fonctionne aussi si je le laisse sur le table.

**totofe** · 19/06/2009, 11h48

Cool en regardant la fonction de pus près on peut spécifier les types des différentes colonnes (string, date, number) ^^

**le_chomeur** · 19/06/2009, 11h55

pas testé pour les nombre , je pense qu'il doit falloir rajouter un parseInt sur les données récupéré s'il s'agit de nombre , + une option spécifiant qu'il s'agit de nombre ...

la il s'agit d'un autre sujet

Tri dynamique table HTML

JavaScript

Discussions similaires

Partager

Partager