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.
Voici mon code :
<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; CURSORointer }
#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(e,Dec) //Dec= 0:Croissant, 1é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>
<center>
Chevaux ▼▲,
Date ▼▲,
Age ▼▲,
Ind ▼▲
TORNADE DU
DECLIC , 20/03/2005, 4, 127.1,
----
PITCHPIN DES
BOIS, 22/02/2005, 3, 127.8,
----
PITCHPIN DES
BOIS, 22/04/2005, 3, 127.3,
----
RENATE DES
LANDES, 23/02/2005, 7, 128.2,
----
MIGUEL DES
VOLOS, 23/05/2005, 6, 129.6,
----
NIKY DU
DONJON, 23/02/2006, 5, 131.3,
----
NIKY DU
GOLF, 23/02/2005, 5, 128.6
</html>
Mais la, j'ai une erreur dans la partie javascript :
oCell=oCell.parentNode a la valeur null
Bonjour,
[i][b]Mais la, j'ai une erreur dans la partie javascript :
oCell=oCell.parentNode a la valeur null/b/i
Normal tu as changé la structure de ton document et la fonction TableOrder fait une recherche automatique du champ cliqué et applique le tri sur la colonne correspondante.
Une solution consiste à modifier l'appel de la fonction, en passant le numéro de la colonne
<td>Chevaux ▼...
<td>Date ▼...
et ainsi de suite
Il te faut mettre une ID sur la table à trier, et dans ta fonction, modifier les références des objets...
;O)
Chevaux ▼▲,
Date ▼▲,
Age ▼▲,
Ind ▼▲
<table id="tri">
Il te faut mettre une ID sur la table à trier, et dans ta fonction, modifier les références des objets...
J'ai mis une ID dans la table qui contiens les données, mais je ne comprends pas ce que tu veut dire par : dans ta fonction, modifier les références des objets...
Et j'ai une erreur a cette ligne :
objet=oTable.rows[1].cells[c].innerHTML.replace(/<\/?[^>]+>/gi,"")
erreur : 'oTable.Rows.1.cells' a la valeur Null ou n'est pas un objet.
...il te faut modifier la fonction pour tenir compte des nouveaux paramètres
function TableOrder( col_, Dec)
//-- recup de l'objet table a traiter
var oTable = document.getElementById('T_DATA'); // ici la table a pour id T_DATA
//-- et de la colonne a traiter
var index = col_;
ensuite il te faudra revoir les initialisations des compteurs et des index des tableaux, en effet la ligne 1 de l'ancienne mouture de la source correspondait au titre alors que maintenant il s'agit de la première ligne de données...
;O)
autant pour moi, j'ai omis de signaler qu'il y a du code à supprimer du fait de la nouveauté
//function TableOrder(e,Dec) //Dec= 0:Croissant, 1:Décroissant
function TableOrder( col_, Dec)
{
//-- recup de l'objet table a traiter
var oTable = document.getElementById('T_DATA'); // ici la table a pour id T_DATA
//-- et de la colonne a traiter
var index = col_;
var FntSort = new Array()
/*-- ON SUPPRIME
//---- Détermine : oCell(cellule) oTable(table) index(index cellule) -----//
if(!col_) col_=window.event
for(oCell=col_.srcElement?col_.srcElement:col_.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
-- FIN SUPPRESSION */
//---- Copier Tableau Html dans Table JavaScript ----//
var Table = new Array()
for(r=1;r<oTable.rows.length;r++) Table[r-1] = new Array()
ensuite il te faudra revoir les initialisations des compteurs et des index des tableaux, en effet la ligne 1 de l'ancienne mouture de la source correspondait au titre alors que maintenant il s'agit de la première ligne de données..
Bonjour,
tu t'éloignes de la solution que tu tenais presque...
1/ les paramètres clo_ et Dec sont impératifs, l'un pour le repérage de la colonne à traiter, l'autre pour l'ordre de tri.
2/ les indices des tableaux doivent être au même niveau, oTable.rows[r] et Table[r]
la fonction devrait ressembler à cela...
//----------------------------
function TableOrder(col_, Dec) {
var FntSort = new Array()
var oTable = document.getElementById('T_DATA');
index = col_;
//---- Copier Tableau Html dans Table JavaScript ----//
var Table = new Array()
//** MODIF for (r 1; r < oTable.rows.length; r++) Table[r - 1] new Array()
for (r 0; r < oTable.rows.length; r++) Table[r] new Array()
for (c = 0; c < oTable.rows[0].cells.length; c++) {
var Type;
//** MODIF objet = oTable.rows[1].cells[c].innerHTML.replace(/<\/?[^>]+>/gi, "")
var 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
//** MODIF for (r = 1; r < oTable.rows.length; r++) //De toutes les rangées
for (r = 0; r < oTable.rows.length; r++) {
objet = oTable.rows[r].cells[c].innerHTML.replace(/<\/?[^>]+>/gi, "")
switch (Type) {
case 0:
//** MODIF Table[r -1][c] = new Date(objet.substring(6), objet.substring(3, 5), objet.substring(0, 2));
Table[r][c] = new Date(objet.substring(6), objet.substring(3, 5), objet.substring(0, 2));
break; //date jj/mm/aaaa
case 1:
//** MODIF Table[r -1][c] = parseFloat(objet.replace(/[^0-9.-]/g, ''));
Table[r][c] = parseFloat(objet.replace(/[^0-9.-]/g, ''));
break; //nombre
case 2:
//** MODIF Table[r -1][c] = objet.toLowerCase();
Table[r][c] = objet.toLowerCase();
break; //Chaine de caractère
}
//** MODIF Table[r -1][c + oTable.rows[0].cells.length] = oTable.rows[r].cells[c].innerHTML
Table[r][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
//** MODIF for (r = 1; r < oTable.rows.length; r++) //De toutes les rangées
for (r = 0; r < oTable.rows.length; r++) { //De toutes les rangées
//** MODIF oTable.rows[r].cells[c].innerHTML = Table[r - 1][c + oTable.rows[0].cells.length];
oTable.rows[r].cells[c].innerHTML = Table[r][c + oTable.rows[0].cells.length];
}
}
}
voila les lignes modifiées sont précédées de //** MODIF
;O)
Oui, tu a raison mais en voulant simplifier, j'ai multiplié les gaffes.
J'ai donc rectifié avec tes conseils et cela fonctionne parfaitement.
Un super Merci pour tes conseils.
Une dernière chose si tu en a le temps :
Comment réunir en un seul symbole la flèche du haut et la flèche du bas dans les entêtes de façon qu'a chaque ckick dessus le processus de tri s'inverse ?
J'ai don modifié aussi :
<td width="200">Chevaux ▼
Par :
<td width="200">Chevaux ▼▲
Ou en cliquant simplement sur l'entçete de la colonne ?
dans ce cas il faut modifier la façon de gérer le paramètre Dec de la fonction TableOrder
une façon de procéder pourrait être à partir d'un Array de contrôler l'état de l'incrément 0 ou 1
en variable global on aurait
var T_Dec = new Array();
et dans la fonction on teste l'état de la donnée
//----------------------------
function TableOrder(col_, Dec) {
//-- test si Init
if( T_Dec[col_] !=undefined){
T_Dec[col_] = 1 -T_Dec[col_]; // inverse l'etat
}
else {
T_Dec[col_] = 1; // par exemple
}
Dec = T_Dec[col_]; // affectation pour le reste de la fonction
dans ce cas le paramètre Dec n'est plus indispensable...
;O)
