Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: sortowanie tabeli rosnace i malejące
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
mateuszpi
20.03.2007, 12:09:34
Witam. mam taki skrypt w javie:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Sortowanie danych w DHTML</title>
  4. <meta name="description" content="Sortowanie tabeli w JavaScript">
  5. <meta name="kategoria" content="Gości">
  6. <meta name="author" content="BlaTek">
  7. <meta name="email" content="blatek@25.pl">
  8. <meta name="www" content="http://blatek.25.pl">
  9. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
  10.  
  11. <script type="text/javascript">
  12. function exPL(x){
  13.  return x.toLowerCase().replace(/[ąęśćółńżź]/g,function(s){
  14.   return(s=='ą'?'a':s=='ę'?'e':s=='ś'?'s':s=='ć'?'c':
  15.   s=='ó'?'o':s=='ł'?'l':s=='ń'?'n':s=='ź'?'z':'zż')+'ż'})
  16. }
  17.  
  18. var Sekcja,Wiersze,Tablica_Wierszy=[]
  19.  
  20. function initSort(){
  21.  if(!document.getElementById)return
  22.  Sekcja=document.getElementById('Sort_id')
  23.  Wiersze=Sekcja.getElementsByTagName('tr')
  24.  
  25. for(var i=0;i<Wiersze.length;i++)
  26.   Tablica_Wierszy[i]=Wiersze[i].cloneNode(true)
  27. }
  28.  
  29. function Sortuj(x){
  30.  if(!document.getElementById||!Wiersze)return
  31.  
  32.  Tablica_Wierszy.sort(function(A,B,a,b){
  33.     a=A.getElementsByTagName('td')[x].innerHTML
  34.     b=B.getElementsByTagName('td')[x].innerHTML
  35. 	a=exPL(a);b=exPL(b)
  36.     return a>b?1:a<b?-1:0
  37.    }
  38.  )
  39.  
  40.  while(Wiersze.length)
  41.   Sekcja.removeChild(Wiersze[0])
  42.  for(var i=0;i<Tablica_Wierszy.length;i++)
  43.   Sekcja.appendChild(Tablica_Wierszy[i])
  44. }
  45. </script>
  46.  
  47. </head>
  48.  
  49. <body onload="initSort()">
  50.  
  51. <p>
  52. <a href="#" onclick="Sortuj(0);return false">Sortuj według Imienia</a><br>
  53. <a href="#" onclick="Sortuj(1);return false">Sortuj według Nazwiska</a><br>
  54. <a href="#" onclick="Sortuj(2);return false">Sortuj według Zawodu</a><br>
  55. </p>
  56.  
  57. <table border="1">
  58.  <tbody>
  59.   <tr><th>Imię</th><th>Nazwisko</th><th>Zawód</th></tr>
  60.  </tbody>
  61.  <tbody id="Sort_id">
  62.   <tr><td>Jan</td><td>Kowalski</td><td>kowal</td></tr>
  63.   <tr><td>Maciej</td><td>Kuroń</td><td>kucharz</td></tr>
  64.   <tr><td>Zbigniew</td><td>Zamachowski</td><td>aktor</td></tr>
  65.   <tr><td>Adam</td><td>Małysz</td><td>skoczek</td></tr>
  66.   <tr><td>Bill</td><td>Clinton</td><td>emeryt</td></tr>
  67.   <tr><td>Dorota</td><td>Stalińska</td><td>aktorka</td></tr>
  68.   <tr><td>Krzysztof</td><td>Nowak</td><td>robotnik</td></tr>
  69.   <tr><td>Bolesław</td><td>Chrobry</td><td>król</td></tr>
  70.   <tr><td>Jerzy</td><td>Stuhr</td><td>aktor</td></tr>
  71.   <tr><td>Kamil</td><td>Durczok</td><td>dziennikarz</td></tr>
  72.   <tr><td>Natalia</td><td>Kukulska</td><td>piosenkarka</td></tr>
  73.   <tr><td>Piotr</td><td>Buśka</td><td>webmaster</td></tr>
  74.   <tr><td>Colin</td><td>McRae</td><td>kierowca</td></tr>
  75.   <tr><td>Henryk</td><td>Sienkiewicz</td><td>pisarz</td></tr>
  76.   <tr><td>Kazimierz</td><td>Wielki</td><td>król</td></tr>
  77.   <tr><td>Bogdan</td><td>Piekarski</td><td>piekarz</td></tr>
  78.   <tr><td>Stanisław</td><td>Moniszko</td><td>muzyk</td></tr>
  79.   <tr><td>Adam</td><td>Mickiewicz</td><td>pisarz</td></tr>
  80.  </tbody>
  81. </table>
  82.  
  83. </body>
  84. </html>
[HTML] pobierz, plaintext


działą perfekcyjnie jednak ustawia tylko w kolejności alfabetycznej: a b c d..
czy mozecie mi go przerobić aby by ustawial też odwrotnie czyli od tyłu alfabetu: questionmark.gif z y x ...

może być na zasadzie 2 linka albo powtórne kliknięcie powoduje segregowanie odwrotne.

głównym wymaganiem jest aby działało dla tabel napisanych w formacie jak wyżej.

ja dopisałem coś takiego:
[HTML] pobierz, plaintext 
  1. function Sortujz(x){
  2.  if(!document.getElementById||!Wiersze)return
  3.  
  4.  Tablica_Wierszy.sort(function(Z,Y,z,y){
  5.     z=A.getElementsByTagName('td')[x].innerHTML
  6.     y=B.getElementsByTagName('td')[x].innerHTML
  7. 	z=exPL(z);y=exPL(y)
  8.     return z>y?1:z<y?-1:0
  9.    }
  10.  )
[HTML] pobierz, plaintext


i dałem linki w postaci:
[HTML] pobierz, plaintext 
  1. <a href="#" onclick="Sortujz(0);return false">Sortuj według rodzaj</a><br>
  2. <a href="#" onclick="Sortujz(1);return false">Sortuj według E-mail</a><br>
  3. <a href="#" onclick="Sortujz(2);return false">Sortuj według Strona WWW</a><br>
  4. <a href="#" onclick="Sortujz(3);return false">Sortuj według Województwa</a><br>
  5. <a href="#" onclick="Sortujz(4);return false">Sortuj według Ulica</a><br>
  6. <a href="#" onclick="Sortujz(5);return false">Sortuj według Telefon</a><br>
[HTML] pobierz, plaintext



jednak wtedy nie działa żadne sortowanie sad.gif


z góry dzieki i czekam na efekty waszych pomysłów.
nospor
20.03.2007, 12:26:49 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Sortowanie danych w DHTML</title>
  4. <meta name="description" content="Sortowanie tabeli w JavaScript">
  5. <meta name="kategoria" content="Gości">
  6. <meta name="author" content="BlaTek">
  7. <meta name="email" content="blatek@25.pl">
  8. <meta name="www" content="http://blatek.25.pl">
  9. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
  10.  
  11. <script type="text/javascript">
  12. function exPL(x){
  13.  return x.toLowerCase().replace(/[ąęśćółńżź]/g,function(s){
  14.   return(s=='ą'?'a':s=='ę'?'e':s=='ś'?'s':s=='ć'?'c':
  15.   s=='ó'?'o':s=='ł'?'l':s=='ń'?'n':s=='ź'?'z':'zż')+'ż'})
  16. }
  17.  
  18. var Sekcja,Wiersze,Tablica_Wierszy=[]
  19.  
  20. function initSort(){
  21.  if(!document.getElementById)return
  22.  Sekcja=document.getElementById('Sort_id')
  23.  Wiersze=Sekcja.getElementsByTagName('tr')
  24.  
  25. for(var i=0;i<Wiersze.length;i++)
  26.   Tablica_Wierszy[i]=Wiersze[i].cloneNode(true)
  27. }
  28.  
  29. function Sortuj(x, sort){
  30.  if(!document.getElementById||!Wiersze)return
  31.  
  32.  Tablica_Wierszy.sort(function(A,B,a,b){
  33.     a=A.getElementsByTagName('td')[x].innerHTML
  34.     b=B.getElementsByTagName('td')[x].innerHTML
  35. 	a=exPL(a);b=exPL(b);
  36. 	if (sort == 'up')
  37.     	return a>b?1:a<b?-1:0
  38. 	else	
  39.     	return a<b?1:a>b?-1:0
  40.    }
  41.  )
  42.  
  43.  while(Wiersze.length)
  44.   Sekcja.removeChild(Wiersze[0])
  45.  for(var i=0;i<Tablica_Wierszy.length;i++)
  46.   Sekcja.appendChild(Tablica_Wierszy[i])
  47. }
  48. </script>
  49.  
  50. </head>
  51.  
  52. <body onload="initSort()">
  53.  
  54. <p>
  55. <a href="#" onclick="Sortuj(0, 'up');return false">Sortuj według Imienia Rosnaco</a>||<a href="#" onclick="Sortuj(0, 'down');return false">Sortuj według Imienia Malejaco</a><br>
  56. <a href="#" onclick="Sortuj(1);return false">Sortuj według Nazwiska</a><br>
  57. <a href="#" onclick="Sortuj(2);return false">Sortuj według Zawodu</a><br>
  58. </p>
  59.  
  60. <table border="1">
  61.  <tbody>
  62.   <tr><th>Imię</th><th>Nazwisko</th><th>Zawód</th></tr>
  63.  </tbody>
  64.  <tbody id="Sort_id">
  65.   <tr><td>Jan</td><td>Kowalski</td><td>kowal</td></tr>
  66.   <tr><td>Maciej</td><td>Kuroń</td><td>kucharz</td></tr>
  67.   <tr><td>Zbigniew</td><td>Zamachowski</td><td>aktor</td></tr>
  68.   <tr><td>Adam</td><td>Małysz</td><td>skoczek</td></tr>
  69.   <tr><td>Bill</td><td>Clinton</td><td>emeryt</td></tr>
  70.   <tr><td>Dorota</td><td>Stalińska</td><td>aktorka</td></tr>
  71.   <tr><td>Krzysztof</td><td>Nowak</td><td>robotnik</td></tr>
  72.   <tr><td>Bolesław</td><td>Chrobry</td><td>król</td></tr>
  73.   <tr><td>Jerzy</td><td>Stuhr</td><td>aktor</td></tr>
  74.   <tr><td>Kamil</td><td>Durczok</td><td>dziennikarz</td></tr>
  75.   <tr><td>Natalia</td><td>Kukulska</td><td>piosenkarka</td></tr>
  76.   <tr><td>Piotr</td><td>Buśka</td><td>webmaster</td></tr>
  77.   <tr><td>Colin</td><td>McRae</td><td>kierowca</td></tr>
  78.   <tr><td>Henryk</td><td>Sienkiewicz</td><td>pisarz</td></tr>
  79.   <tr><td>Kazimierz</td><td>Wielki</td><td>król</td></tr>
  80.   <tr><td>Bogdan</td><td>Piekarski</td><td>piekarz</td></tr>
  81.   <tr><td>Stanisław</td><td>Moniszko</td><td>muzyk</td></tr>
  82.   <tr><td>Adam</td><td>Mickiewicz</td><td>pisarz</td></tr>
  83.  </tbody>
  84. </table>
  85.  
  86. </body>
  87. </html>
[HTML] pobierz, plaintext
mateuszpi
20.03.2007, 13:00:23
niestety sortowanie wogóle nie działa. w zadną se stron
nospor
20.03.2007, 13:05:29
no popatrz, a mi dziala:
http://nospor.vis-maior.net/sort.html

Kopiowac tez trzeba umiec tongue.gif
mateuszpi
20.03.2007, 16:30:23
wykorzystałem źródło twojej strony i zadziałąło. a dlaczego przedtem nie chciało questionmark.gif nie wiem ale grunt że teraz działa. dzięki biggrin.gif
Leech
29.08.2007, 16:11:42
a jak to przerobić dla liczb?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.