Séparer entètes et tableau

Question

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. Voici mon code : 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 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 !

PetoleTeam · Answer

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 Chevaux ▼... 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)

cs_bydouille · Answer

Bonjour PetoleTeam, Merci pour tes conseils Voici ce que j'ai modifié : Chevaux ▼▲, Date ▼▲, Age ▼▲, Ind ▼▲ 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. Merci de continuer de m'aider.

PetoleTeam · Answer

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

cs_bydouille · Answer

Bonsoir, J'ai rectifié au mieux avec tes indications, mais le var index = col_; est déjà déclaré plus haut mais sans le col_ ! Maintenant, j'ai cette erreur : 'oCell.tagName' a la valeur Null ou n'est pas un objet. Je joins ma source modifiée pour tests. 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

PetoleTeam · Answer

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

cs_bydouille · Answer

J'ai rectifié comme indiqué

Mais j'ai l'erreur : Objet requis a cette ligne


for(r=1;r<oTable.rows.length;r++) Table[r-1] = new Array()

PetoleTeam · Answer

la table à trier DOIT avoir comme id T_DATA
;O)

cs_bydouille · Answer

Ok, je n'ai plus d'erreurs mais 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 !!!

PetoleTeam · Answer

j'ai écrit plus haut
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..
je pense que c'est cela qui coince...

;O)

cs_bydouille · Answer

Ok PetoleTeam,

Je vais essayer de travailler la dessus.

Un Grand Merci pour ton aide.

Si je coince, je ferai appel a tes bons conseils.

@  +

cs_bydouille · Answer

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. Je te joins le nouveau code qui sera plus simple a débugger. Chevaux ▼, Date ▼ Age ▼, Ind ▼ AAAAAAAAAA, 01/01/2001, 1, 111.1, ---- BBBBBBBBBB, 02/02/2002, 2, 222.2, ---- CCCCCCCCCC, 03/03/2003, 3, 333.3, ---- DDDDDDDDDD, 04/04/2004, 4, 444.4, ---- EEEEEEEEEE, 05/05/2005, 5, 555.5, ---- FFFFFFFFFF, 06/06/2006, 6, 666.6, ---- GGGGGGGGGG, 07/07/2007, 7, 777.7 Petite précision, je suis sous Internet Explorer. Si tu peut y jetter un oeil.

PetoleTeam · Answer

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)

cs_bydouille · Answer

Bonsoir PetoleTeam, 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 : Chevaux ▼ Par : Chevaux ▼▲ Ou en cliquant simplement sur l'entçete de la colonne ?

PetoleTeam · Answer

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)

cs_bydouille · Answer

Bonsoir PetoleTeam,

Merci pour cette ultime info.

Mieux que mieux, il n'y a pas...

J'ai aussi apprécié cette façon de m'aiguiller sans pour autant me donner de solution clé en main.

Cela m'a permis de comprendre et d'évoluluer dans ce tri en mémoire JS.

Je te souhaite de bonnes vacances.

Encore merci et au plaisir de se retrouver
au travers des posts !!!

@  +

Séparer entètes et tableau

15 réponses

Votre réponse