[Javascript] DOM, tris de tableaux coté client ... AIDE NEDDED

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Javascript] DOM, tris de tableaux coté client ... AIDE NEDDED

k666

dites non à petitmou

salut!
j'essaye de faire une fonction javascript, capable de trier un tableau html par colonnes, mais coté client,
je me sers de DOM, mais j'ai des ptites galères ; voilà mon code pour l'instant:

Code :

<HTML>
<HEAD>
<script type="text/javascript">
function sort(obj,sorted)
{
// le nombre de lignes du tableau ....
var nblines = obj.childNodes[0].childNodes.length;
// le nombre de colonnes ...
var nbcols = obj.childNodes[0].childNodes[0].childNodes.length;
var tableValues = new Array(nblines,nbcols);
// alert(nblines + " " + nbcols);
for (i=0;i<nblines;i++)
{
for (j=0;j<nbcols;j++)
{
//tableValues[i,j] =
alert(obj.childNodes[0].childNodes[i].childNodes[j].nodeValue);
// alert(tableValues[i,j]);
}
}
}
</script>
</HEAD>
<BODY>
<table border="1" name="ma_table" id="ma_table">
<tr>
<th><a href="javascript:sort(document.getElementById('ma_table'),1);">pouett</a></th>
<th><a href="javascript:sort(document.getElementById('ma_table'),2);">prout</a></th>
<th><a href="javascript:sort(document.getElementById('ma_table'),3);">coin</a></th>
<th><a href="javascript:sort(document.getElementById('ma_table'),4);">coin</a></th>
</tr>
<tr>
<td>121</td>
<td>paparaze</td>
<td>sepi</td>
<td></td>
</tr>
<tr>
<td>125</td>
<td>25_9o</td>
<td>zigatrik</td>
<td>crik</td>
</tr>
</table>
</BODY>
</HTML>

ça fonctionne bien quand j'alerte le nodeName, mais quand j'alerte le nodeValue il me sort tout le temps NULL ...
or j'aimerais avoir tout ce qu'il y a entre un TD ouvrant et un fermant ....
d'ailleurs, si c'est possible, n'avoir que le vrai contenu, et pas le HTML contenu .... vous voyez ske je veux dire ? par exemple dans un <TD><p class="pouette">coincoin</p></TD> j'aimerais n'avoir que coincoin ....
bref, si vous avez un conseil une aide, ou un bon lien, je suis prenant de tout!!!
et si vous savez qu'il y a des incompatibilités par exemple avec ces :kaola: :fou: MAC :heink: :fou: :gun: dites le aussi

merci

Message édité par k666 le 08-07-2002 à 11:50:11

Publicité

youdontcare

>> ça fonctionne bien quand j'alerte le nodeName, mais quand j'alerte le nodeValue il me sort tout le temps NULL ...

on est censé comprendre ?

>> or j'aimerais avoir tout ce qu'il y a entre un TD ouvrant et un fermant ....

node texte, par exemple. ce n'est pas 'entre', c'est en fils.

>> d'ailleurs, si c'est possible, n'avoir que le vrai contenu, et pas le HTML contenu .... vous voyez ske je veux dire ? par exemple dans un <TD><p class="pouette">coincoin</p></TD> j'aimerais n'avoir que coincoin ....

td.innerText sous ie. sous mozilla, il faut parcourir tous les fils et concaténer toutes les nodes textes.

>> bref, si vous avez un conseil une aide, ou un bon lien, je suis prenant de tout!!!

hm, w3.org ? dom core & compagnie, pour le détail des nodes et de leurs interfaces. par exemple tu t'étonnais qu'il y ait une node 'entre' le td : childNodes donne accès à toutes les nodes (commentaire, texte, html), nextSibling & co donne accès seulement aux nodes html (où l'inverse, je ne me souviens plus). bref, potasse la doc.

>> et si vous savez qu'il y a des incompatibilités par exemple avec ces :kaola: :fou: MAC :heink: :fou: :gun: dites le aussi

à part innerText, je vois pas.

k666

dites non à petitmou

bon j'ai amélioré un peu mon code,
le next sibling ne me servait pas puisque je suis sur que je vais travailler sur des tableaux qui sont formatés d'une façon particulière, sans colspans ni autres ... donc pas besoin de checker vraiment au cas par cas ...
j'ai fait une fonction pour cleaner le chteumeuleu et qu'il me renvoie que le contenu détagué, pour pouvoir ainsi faire mes tris etc...
par contre pour la reconstruction du tableau, je sais pas trop comment faire ... je sais pas si reconstruire le tableau html avec du dom ou si le faire directement avec du innerHTML bourrin :s
j'ai vu qu'il y avait des fonctions du style swapNodes etc... qui sont plus ou moins compatibles entre les différents ordis .. mais bon je sais pas vraiment is ya des standards...j'ai regardé un peu sur le net, et le seul truc qui semble à peu près implémenté partout c'est le innerHTML, or c'est pas un standard :spookie:
donc: bah tant pis vous auriez pas une piste ?

Code :

<HTML>
<HEAD>
<script type="text/javascript">
// clean tous les tags HTML, retourne le texte contenu ...
function extractValue(shitty)
{
if (shitty.length > 0)
{
while( (shitty.indexOf("<" ) >= 0) && (shitty.indexOf(">" ) > shitty.indexOf("<" )) )
{
shitty = shitty.substr(0,shitty.indexOf("<" )) + shitty.substr(shitty.indexOf(">" )+1,shitty.length);
}
return shitty;
}
return;
}
// réorganise le tableau ...
function sort(obj,sorted)
{
// le nombre de lignes du tableau ....
var nblines = obj.childNodes[0].childNodes.length;
// le nombre de colonnes ...
var nbcols = obj.childNodes[0].childNodes[0].childNodes.length;
// tableau servant aux tris ...
var tableValues = new Array(nblines,nbcols);
// tableau servant à la reconstruction ...
var tableContents = new Array(nblines,nbcols);
// remplissage des cases ...
for (i=0;i<nblines;i++)
{
for (j=0;j<nbcols;j++)
{
tableValues[i,j] = extractValue(obj.childNodes[0].childNodes[i].childNodes[j].innerHTML);
tableContents[i,j] = obj.childNodes[0].childNodes[i].childNodes[j].innerHTML;
}
}
}
</script>
</HEAD>
<BODY>
<table border="1" name="ma_table" id="ma_table">
<tr>
<th><a href="javascript:sort(document.getElementById('ma_table'),1);">pouett</a></th>
<th><a href="javascript:sort(document.getElementById('ma_table'),2);">prout</a></th>
<th><a href="javascript:sort(document.getElementById('ma_table'),3);">coin</a></th>
<th><a href="javascript:sort(document.getElementById('ma_table'),4);">coin</a></th>
</tr>
<tr>
<td>121</td>
<td>paparaze</td>
<td>sepi</td>
<td></td>
</tr>
<tr>
<td>125</td>
<td>25_9o</td>
<td>zigatrik</td>
<td>crik</td>
</tr>
</table>
</BODY>
</HTML>

youdontcare

je ne sais pas vraiment ce que tu veux faire ... on va dire que si pour c'est trier un tableau sorti par une page dynamique, je pense que c'est mieux de générer des structures js puis de créer dynamiquement le tableau html, toujours en js. pour trier ça devient simple : tu utilises sort() sur tes structures (si elles contiennent du html, tu peux dès le début générer une version 'text-only', puis tu reconstruis le tableau (avec innerHTML, ou createElement()&co).

chocoboy

pkoi tu génère pas le résultat en XML, tu le tries avec un petit <xsl:sort select="..." >, puis tu transformes le tout en XHTML.
Tu peux le faire côté client si ton browser l'accepte (nécessite d'avoir installé MSXML sir IE ou d'avoir Mozilla).
Ca a l'air relou la solution javascript

k666

dites non à petitmou

ouais je pourrais faire ça mais le truc c que je veux modifier le moins possible mes pages, et pouvoir à tout moment enlever, ou bien aussi ne pas activer la fonctionnalité si c'est un navigateur bogué ... c pour ça que j'essaye de faire comme ça .... :jap:

euh ...
en fait j'ai un problème avec les array sort javascript;
je sais pas comment pouvoir trier des tableaux à plusieurs dimensions, ou pouvoir garder l'historique de ce qui a été fait ...
en effet je fais mon tri sur un tableau contenant uniquement les valeurs ...

mais à la reconstruction, je dois utiliser ce tri pour afficher un second tableau je sais pas si je suis clair ?

j'aimerais par exemple, qu'au lieu de m'ordonner mon tableau, il me dise:

1 --> 3
2 --> 1
3 --> 2

etc....
qu'il me sorte l'historique de ce qu'il a fait ...
bon si quelqu'un voit ce que je veux dire ?
merci

youdontcare

sort() prend en paramètre une fonction qui lui dit comment trier. tu peux donc créer un tableau d'indices (1 2 3 4 ...), puis appeler sort() avec une fonction qui s'occupe de déterminer comment trier (ça marche comme qsort() en C).

k666

dites non à petitmou

allez! un ptit up! voilà où j'en suis:
j'arrive à avoir l'ordre de tri, c'est à dire que j'obtiens un tableau avec les nouvelles positions de chacun des TR ....

j'aimerais en fonction de cet ordre là, redéplacer les TR pour avoir mon tableau bien construit;
il y a apparemment un fonction du style swapNodes en DOM qui permet de permuter deux nodes TR; et donc je pourrais faire un truc du style swap(1,7) ; swap(2,3) etc.... mais eskil y aurait pas une façon plus propre de refabriquer un noeud DOM en lui passant un tableau de déplacements ?????

bref;
sinon le code en est là si ça peut vous servir:

Code :

<HTML>
<HEAD>
<script type="text/javascript">
var transTable;
var tableValues;
var tableContents;
var sortedField;
var cancelSort = false;
/*************************************
* fonctions à 2 francs *
*************************************/
// clean tous les tags HTML, retourne le texte contenu ...
function extractValue(shitty)
{
if (shitty.length > 0)
{
while( (shitty.indexOf("<" ) >= 0) && (shitty.indexOf(">" ) > shitty.indexOf("<" )) )
{
shitty = shitty.substr(0,shitty.indexOf("<" )) + shitty.substr(shitty.indexOf(">" )+1,shitty.length);
}
return shitty;
}
return;
}
// échange deux cases de tableau
function swap(i, j)
{
if (i==j)
return !cancelSort;
var t=tableValues[i];
tableValues[i]=tableValues[j];
tableValues[j]=t;
var u = transTable[i];
transTable[i] = transTable[j];
transTable[j] = u;
return !cancelSort;
}
// algorithme de tri
function quickSort1(start, end)
{
if (end-start > 1 && !cancelSort)
{
var lastlow=start;
for (var i=start+1; i<end; ++i)
{
if (tableValues[i][sortedField]<tableValues[start][sortedField])
if (!swap(i, ++lastlow))
return;
}
if (!swap(start, lastlow))
return;
quickSort1(start, lastlow);
if (!cancelSort)
quickSort1(lastlow+1, end);
}
}
/*************************************
* /fonctions à 2 francs\ *
*************************************/
// réorganise le tableau ...
function quickSort(obj,sorted)
{
var nblines = obj.childNodes[0].childNodes.length;
var nbcols = obj.childNodes[0].childNodes[0].childNodes.length;
tableValues = new Array(nblines);
tableContents = new Array(nblines);
transTable = new Array(nblines);
sortedField = sorted;
for (n=1;n<nblines;n++)
{
transTable[n] = n;
}
for (i=0;i<nblines;i++)
{
tableValues[i] = new Array(nbcols);
tableContents[i] = new Array(nbcols);
for (j=0;j<nbcols;j++)
{
tableValues[i][j] = extractValue(obj.childNodes[0].childNodes[i].childNodes[j].innerHTML);
tableContents[i][j] = obj.childNodes[0].childNodes[i].childNodes[j].innerHTML;
}
}
quickSort1(1,nblines);
for (i=1;i<nblines;i++)
{
alert(transTable[i]);
}
}
</script>
</HEAD>
<BODY>
<table border="1" name="ma_table" id="ma_table">
<tr>
<th><a href="javascript:quickSort(document.getElementById('ma_table'),0);">pouett</a></th>
<th><a href="javascript:quickSort(document.getElementById('ma_table'),1);">prout</a></th>
<th><a href="javascript:quickSort(document.getElementById('ma_table'),2);">coin</a></th>
<th><a href="javascript:quickSort(document.getElementById('ma_table'),3);">coin</a></th>
</tr>
<tr>
<td>1</td>
<td>25_9o</td>
<td>zigatrik</td>
<td>crik</td>
</tr>
<tr>
<td>3</td>
<td>paparaze</td>
<td>sepi</td>
<td></td>
</tr>
</table>
</BODY>
</HTML>

FORUM HardWare.fr

Programmation

[Javascript] DOM, tris de tableaux coté client ... AIDE NEDDED

Sujets relatifs
[Javascript] passage de paramètres	[XML] aide sur le XML, les parsers et si possible xerces
[VB] tableaux de cstes...	[Javascript] Temps de chargement (pas dans la barre d'état)
Comment créer une aide type aide windows ? kel outil ?	[DOS] besoin d'aide sur la signification d'une ligne d'un batch.
[Javascript,DOM] Creer dynamiquement un lien dans une table	HTML - JAVASCRIPT : Ptit problème de syntaxe
[JavaScript] opener.close()
Plus de sujets relatifs à : [Javascript] DOM, tris de tableaux coté client ... AIDE NEDDED

Page générée en 0.114 secondes