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

Marsh Posté le 08-07-2002 à 11:47:35

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

Reply

Marsh Posté le 08-07-2002 à 11:47:35

Reply

Marsh Posté le 08-07-2002 à 12:10:20

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

Reply

Marsh Posté le 08-07-2002 à 12:40:43

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>

Reply

Marsh Posté le 08-07-2002 à 12:53:04

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

Reply

Marsh Posté le 08-07-2002 à 13:48:42

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

Reply

Marsh Posté le 08-07-2002 à 14:28:02

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

Reply

Marsh Posté le 08-07-2002 à 14:43:25

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

Reply

Marsh Posté le 09-07-2002 à 10:17:24

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>

Reply

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

Sujets relatifs:

Leave a Replay