Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
5488 connectés 

  FORUM HardWare.fr
  Programmation

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

 
 


Dernière réponse
Sujet : [Javascript] DOM, tris de tableaux coté client ... AIDE NEDDED
k666 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 :
  1. <HTML>
  2. <HEAD>
  3. <script type="text/javascript">
  5. var transTable;
  6. var tableValues;
  7. var tableContents;
  8. var sortedField;
  9. var cancelSort = false;
  12. /*************************************
  13. *  fonctions à 2 francs   *
  14. *************************************/
  16. // clean tous les tags HTML, retourne le texte contenu ...
  17. function extractValue(shitty)
  18. {
  19. if (shitty.length > 0)
  20. {
  21.  while( (shitty.indexOf("<" ) >= 0) && (shitty.indexOf(">" ) > shitty.indexOf("<" )) )
  22.  {
  23.   shitty = shitty.substr(0,shitty.indexOf("<" )) + shitty.substr(shitty.indexOf(">" )+1,shitty.length);
  24.  }
  25.  return shitty;
  26. }
  27. return;
  28. }
  30. // échange deux cases de tableau
  31. function swap(i, j)
  32. {
  33. if (i==j)
  34.  return !cancelSort;
  35. var t=tableValues[i];
  36. tableValues[i]=tableValues[j];
  37. tableValues[j]=t;
  38. var u = transTable[i];
  39. transTable[i] =  transTable[j];
  40. transTable[j] = u;
  41. return !cancelSort;
  42. }
  44. // algorithme de tri
  45. function quickSort1(start, end)
  46. {
  47. if (end-start > 1 && !cancelSort)
  48. {
  49.  var lastlow=start;
  50.  for (var i=start+1; i<end; ++i)
  51.  {
  52.   if (tableValues[i][sortedField]<tableValues[start][sortedField])
  53.    if (!swap(i, ++lastlow))
  54.     return;
  55.  }
  56.  if (!swap(start, lastlow))
  57.   return;
  58.  quickSort1(start, lastlow);
  59.  if (!cancelSort)
  60.   quickSort1(lastlow+1, end);
  61. }
  62. }
  64. /*************************************
  65. *  /fonctions à 2 francs\   *
  66. *************************************/
  69. // réorganise le tableau ...
  70. function quickSort(obj,sorted)
  71. {
  72. var nblines = obj.childNodes[0].childNodes.length;
  73. var nbcols = obj.childNodes[0].childNodes[0].childNodes.length;
  75. tableValues = new Array(nblines);
  76. tableContents = new Array(nblines);
  77. transTable = new Array(nblines);
  79. sortedField = sorted;
  81. for (n=1;n<nblines;n++)
  82. {
  83.  transTable[n] = n;
  84. }
  86. for (i=0;i<nblines;i++)
  87. {
  88.  tableValues[i] = new Array(nbcols);
  89.  tableContents[i] = new Array(nbcols);
  90.  for (j=0;j<nbcols;j++)
  91.  {
  92.   tableValues[i][j] = extractValue(obj.childNodes[0].childNodes[i].childNodes[j].innerHTML);
  93.   tableContents[i][j] = obj.childNodes[0].childNodes[i].childNodes[j].innerHTML;
  94.  }
  95. }
  97. quickSort1(1,nblines);
  99. for (i=1;i<nblines;i++)
  100. {
  101.  alert(transTable[i]);
  102. }
  103. }
  104. </script>
  105. </HEAD>
  106. <BODY>
  107. <table border="1" name="ma_table" id="ma_table">
  108. <tr>
  109. <th><a href="javascript:quickSort(document.getElementById('ma_table'),0);">pouett</a></th>
  110. <th><a href="javascript:quickSort(document.getElementById('ma_table'),1);">prout</a></th>
  111. <th><a href="javascript:quickSort(document.getElementById('ma_table'),2);">coin</a></th>
  112. <th><a href="javascript:quickSort(document.getElementById('ma_table'),3);">coin</a></th>
  113. </tr>
  114. <tr>
  115. <td>1</td>
  116. <td>25_9o</td>
  117. <td>zigatrik</td>
  118. <td>crik</td>
  119. </tr>
  120. <tr>
  121. <td>3</td>
  122. <td>paparaze</td>
  123. <td>sepi</td>
  124. <td></td>
  125. </tr>
  126. </table>
  127. </BODY>
  128. </HTML>

Votre réponse
Nom d'utilisateur    Pour poster, vous devez être inscrit sur ce forum .... si ce n'est pas le cas, cliquez ici !
Le ton de votre message                        
                       
Votre réponse
[b][i][u][strike][spoiler][fixed][cpp][url][email][img][*]   
 
   [quote]
 
Options

 
Vous avez perdu votre mot de passe ?


Vue Rapide de la discussion
k666 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 :
  1. <HTML>
  2. <HEAD>
  3. <script type="text/javascript">
  5. var transTable;
  6. var tableValues;
  7. var tableContents;
  8. var sortedField;
  9. var cancelSort = false;
  12. /*************************************
  13. *  fonctions à 2 francs   *
  14. *************************************/
  16. // clean tous les tags HTML, retourne le texte contenu ...
  17. function extractValue(shitty)
  18. {
  19. if (shitty.length > 0)
  20. {
  21.  while( (shitty.indexOf("<" ) >= 0) && (shitty.indexOf(">" ) > shitty.indexOf("<" )) )
  22.  {
  23.   shitty = shitty.substr(0,shitty.indexOf("<" )) + shitty.substr(shitty.indexOf(">" )+1,shitty.length);
  24.  }
  25.  return shitty;
  26. }
  27. return;
  28. }
  30. // échange deux cases de tableau
  31. function swap(i, j)
  32. {
  33. if (i==j)
  34.  return !cancelSort;
  35. var t=tableValues[i];
  36. tableValues[i]=tableValues[j];
  37. tableValues[j]=t;
  38. var u = transTable[i];
  39. transTable[i] =  transTable[j];
  40. transTable[j] = u;
  41. return !cancelSort;
  42. }
  44. // algorithme de tri
  45. function quickSort1(start, end)
  46. {
  47. if (end-start > 1 && !cancelSort)
  48. {
  49.  var lastlow=start;
  50.  for (var i=start+1; i<end; ++i)
  51.  {
  52.   if (tableValues[i][sortedField]<tableValues[start][sortedField])
  53.    if (!swap(i, ++lastlow))
  54.     return;
  55.  }
  56.  if (!swap(start, lastlow))
  57.   return;
  58.  quickSort1(start, lastlow);
  59.  if (!cancelSort)
  60.   quickSort1(lastlow+1, end);
  61. }
  62. }
  64. /*************************************
  65. *  /fonctions à 2 francs\   *
  66. *************************************/
  69. // réorganise le tableau ...
  70. function quickSort(obj,sorted)
  71. {
  72. var nblines = obj.childNodes[0].childNodes.length;
  73. var nbcols = obj.childNodes[0].childNodes[0].childNodes.length;
  75. tableValues = new Array(nblines);
  76. tableContents = new Array(nblines);
  77. transTable = new Array(nblines);
  79. sortedField = sorted;
  81. for (n=1;n<nblines;n++)
  82. {
  83.  transTable[n] = n;
  84. }
  86. for (i=0;i<nblines;i++)
  87. {
  88.  tableValues[i] = new Array(nbcols);
  89.  tableContents[i] = new Array(nbcols);
  90.  for (j=0;j<nbcols;j++)
  91.  {
  92.   tableValues[i][j] = extractValue(obj.childNodes[0].childNodes[i].childNodes[j].innerHTML);
  93.   tableContents[i][j] = obj.childNodes[0].childNodes[i].childNodes[j].innerHTML;
  94.  }
  95. }
  97. quickSort1(1,nblines);
  99. for (i=1;i<nblines;i++)
  100. {
  101.  alert(transTable[i]);
  102. }
  103. }
  104. </script>
  105. </HEAD>
  106. <BODY>
  107. <table border="1" name="ma_table" id="ma_table">
  108. <tr>
  109. <th><a href="javascript:quickSort(document.getElementById('ma_table'),0);">pouett</a></th>
  110. <th><a href="javascript:quickSort(document.getElementById('ma_table'),1);">prout</a></th>
  111. <th><a href="javascript:quickSort(document.getElementById('ma_table'),2);">coin</a></th>
  112. <th><a href="javascript:quickSort(document.getElementById('ma_table'),3);">coin</a></th>
  113. </tr>
  114. <tr>
  115. <td>1</td>
  116. <td>25_9o</td>
  117. <td>zigatrik</td>
  118. <td>crik</td>
  119. </tr>
  120. <tr>
  121. <td>3</td>
  122. <td>paparaze</td>
  123. <td>sepi</td>
  124. <td></td>
  125. </tr>
  126. </table>
  127. </BODY>
  128. </HTML>
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 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 :)
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
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).
k666 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 :
  1. <HTML>
  2. <HEAD>
  3. <script type="text/javascript">
  5. // clean tous les tags HTML, retourne le texte contenu ...
  6. function extractValue(shitty)
  7. {
  8. if (shitty.length > 0)
  9. {
  10.  while( (shitty.indexOf("<" ) >= 0) && (shitty.indexOf(">" ) > shitty.indexOf("<" )) )
  11.  {
  12.   shitty = shitty.substr(0,shitty.indexOf("<" )) + shitty.substr(shitty.indexOf(">" )+1,shitty.length);
  13.  }
  14.  return shitty;
  15. }
  16. return;
  17. }
  19. // réorganise le tableau ...
  20. function sort(obj,sorted)
  21. {
  22. // le nombre de lignes du tableau ....
  23. var nblines = obj.childNodes[0].childNodes.length;
  24. // le nombre de colonnes ...
  25. var nbcols = obj.childNodes[0].childNodes[0].childNodes.length;
  27. // tableau servant aux tris ...
  28. var tableValues = new Array(nblines,nbcols);
  29. // tableau servant à la reconstruction ...
  30. var tableContents = new Array(nblines,nbcols);
  32. // remplissage des cases ...
  33. for (i=0;i<nblines;i++)
  34. {
  35.  for (j=0;j<nbcols;j++)
  36.  {
  37.   tableValues[i,j] = extractValue(obj.childNodes[0].childNodes[i].childNodes[j].innerHTML);
  38.   tableContents[i,j] = obj.childNodes[0].childNodes[i].childNodes[j].innerHTML;
  39.  }
  40. }
  41. }
  43. </script>
  44. </HEAD>
  45. <BODY>
  46. <table border="1" name="ma_table" id="ma_table">
  47. <tr>
  48. <th><a href="javascript:sort(document.getElementById('ma_table'),1);">pouett</a></th>
  49. <th><a href="javascript:sort(document.getElementById('ma_table'),2);">prout</a></th>
  50. <th><a href="javascript:sort(document.getElementById('ma_table'),3);">coin</a></th>
  51. <th><a href="javascript:sort(document.getElementById('ma_table'),4);">coin</a></th>
  52. </tr>
  53. <tr>
  54. <td>121</td>
  55. <td>paparaze</td>
  56. <td>sepi</td>
  57. <td></td>
  58. </tr>
  59. <tr>
  60. <td>125</td>
  61. <td>25_9o</td>
  62. <td>zigatrik</td>
  63. <td>crik</td>
  64. </tr>
  65. </table>
  66. </BODY>
  67. </HTML>
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:  :o MAC :heink:  :fou:  :gun:  dites le aussi :p
 
à part innerText, je vois pas.
k666 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 :
  1. <HTML>
  2. <HEAD>
  3. <script type="text/javascript">
  5. function sort(obj,sorted)
  6. {
  7. // le nombre de lignes du tableau ....
  8. var nblines = obj.childNodes[0].childNodes.length;
  9. // le nombre de colonnes ...
  10. var nbcols = obj.childNodes[0].childNodes[0].childNodes.length;
  12. var tableValues = new Array(nblines,nbcols);
  14. // alert(nblines + " " + nbcols);
  16. for (i=0;i<nblines;i++)
  17. {
  18.  for (j=0;j<nbcols;j++)
  19.  {
  20.   //tableValues[i,j] =  
  21.   alert(obj.childNodes[0].childNodes[i].childNodes[j].nodeValue);
  22. //   alert(tableValues[i,j]);
  23.  }
  24. }
  26. }
  28. </script>
  29. </HEAD>
  30. <BODY>
  31. <table border="1" name="ma_table" id="ma_table">
  32. <tr>
  33. <th><a href="javascript:sort(document.getElementById('ma_table'),1);">pouett</a></th>
  34. <th><a href="javascript:sort(document.getElementById('ma_table'),2);">prout</a></th>
  35. <th><a href="javascript:sort(document.getElementById('ma_table'),3);">coin</a></th>
  36. <th><a href="javascript:sort(document.getElementById('ma_table'),4);">coin</a></th>
  37. </tr>
  38. <tr>
  39. <td>121</td>
  40. <td>paparaze</td>
  41. <td>sepi</td>
  42. <td></td>
  43. </tr>
  44. <tr>
  45. <td>125</td>
  46. <td>25_9o</td>
  47. <td>zigatrik</td>
  48. <td>crik</td>
  49. </tr>
  50. </table>
  51. </BODY>
  52. </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:  :o MAC :heink:  :fou:  :gun:  dites le aussi :p
 
merci

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)