Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] problem z sortowaniem wedlug daty
Forum PHP.pl > Forum > XML, AJAX
trucksweb
28.12.2008, 19:15:28
pisze skrypt w jquery umozliwiajacy sortowanie tabeli i mam maly problem, gdyz do sortowania daty w formacie YYYY-MM-DD
przerobilem jakis inny skrypt jquery i cos sie popierniczylo, ze nie sortuje:

[PHP] pobierz, plaintext 
  1. <?php
  2. $.fn.alternateRowColors = function() {
  3.     $('tbody tr:odd', this).removeClass('even').addClass('odd');
  4.     $('tbody tr:even', this).removeClass('odd').addClass('even');
  5.     return this;
  6. };
  7.  
  8. $(document).ready(function() {
  9.  
  10.  var alternateRowColors = function($table) {
  11.     $('tbody tr:odd', $table).removeClass('even').addClass('odd');
  12.     $('tbody tr:even', $table).removeClass('odd').addClass('even');
  13.   };
  14.   
  15.   $('table.sortable').each(function() {
  16.     var $table = $(this);
  17.     $table.alternateRowColors($table);
  18.     
  19.     $('th', $table).each(function(column) {
  20.       var findSortKey;
  21.       
  22.       if($(this).is('.sort-alpha')) { 
  23.       
  24.         findSortKey = function($cell) {
  25.           return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
  26.         };
  27.        }
  28.       else if($(this).is('.sort-numeric')) { 
  29.         findSortKey = function($cell) {
  30.           var key = parseFloat($cell.text().replace(/^[^d.]*/, ''));
  31.           return isNaN(key) ? 0 : key;        
  32.         };
  33.        }  
  34.       else if($(this).is('.sort-date')) {
  35.         findSortKey = function($cell) {
  36.           var dateTest = [
  37.                         { regExp:/^(0?[1-9]|1[012])([- /.])(0?[1-9]|[12][0-9]|3[01])([- /.])((dd)?dd)$/, d:3, m:1, y:5 },  // mdy
  38.                         { regExp:/^(0?[1-9]|[12][0-9]|3[01])([- /.])(0?[1-9]|1[012])([- /.])((dd)?dd)$/, d:1, m:3, y:5 },  // dmy
  39.                         { regExp:/^(dddd)([- /.])(0?[1-9]|1[012])([- /.])(0?[1-9]|[12][0-9]|3[01])$/, d:5, m:3, y:1 }      // ymd
  40.                         ];
  41.                 var start, cnt = 0, numFormats = dateTest.length;
  42.                 while(cnt < numFormats) {
  43.                         start = (cnt + (favourDMY ? numFormats + 1 : numFormats)) % numFormats;
  44.                         if(dateIn.match(dateTest[start].regExp)) {
  45.                                 res = dateIn.match(dateTest[start].regExp);
  46.                                 y = res[dateTest[start].y];
  47.                                 m = res[dateTest[start].m];
  48.                                 d = res[dateTest[start].d];
  49.                                 if(m.length == 1) m = "0" + String(m);
  50.                                 if(d.length == 1) d = "0" + String(d);
  51.                                 if(y.length != 4) y = (parseInt(y) < 50) ? "20" + String(y) : "19" + String(y);
  52.  
  53.                                 return Date.parse(y+String(m)+d;
  54.                         };
  55.                         cnt++;
  56.                 };
  57.                 return 0;   
  58.         };
  59.       }
  60.        
  61.        if(findSortKey) {
  62.         $(this).addClass ('clickable').hover(function() {
  63.           $(this).addClass('hover');
  64.         }, function() {
  65.           $(this).removeClass('hover');
  66.         }).click(function() {
  67.           var rows = $table.find('tbody > tr').get();
  68.           
  69.           $.each(rows, function(index, row) {
  70.             row.sortKey = findSortKey($(row).children('td').eq(column));
  71.           });
  72.           
  73.           rows.sort(function(a, b) {                    
  74.             if(a.sortKey < b.sortKey) return -1;
  75.             if(a.sortKey > b.sortKey) return 1;   
  76.             return 0;        
  77.           });
  78.           $.each(rows, function(index, row) {
  79.             $table.children('tbody').append(row);
  80.             row.sortKey = null;
  81.           });
  82.           $table.alternateRowColors($table);
  83.         });
  84.       }
  85.     });
  86.   });
  87. });
  88. ?>
[PHP] pobierz, plaintext



moze ktos zauwazy w czym problem ? (chodzi wylacznie o sortowanie wg daty)
ziqzaq
28.12.2008, 21:02:47
Strzelam. Brak nawiasu, linia 57?
[PHP] pobierz, plaintext 
  1. <?php
  2. //...
  3. return Date.parse(y+String(m)+d;
  4. //...
  5. ?>
[PHP] pobierz, plaintext

Nie wiem czy to błąd przy wklejaniu kodu - w sumie taki błąd js byłby widoczny i pod Operą i Firefoxem (firebug) - ale związane jest to z datą a z tym są problemy. winksmiley.jpg
trucksweb
28.12.2008, 21:13:45
to nie nawias, ale wymyslilem cos takiego-

jesli mam date w postaci YYYY-mm-dd
to wystarczy, ze usune "-" i porownam powstala liczbe.
Tak na szybko to robilem i nie sprawdzalem, czy zawsze sie to bedzie zgadzam. Musze to przemyslec jeszcze:

mam cos takiego:
[PHP] pobierz, plaintext 
  1. <?php
  2. if($(this).is('.sort-date')) {
  3.         findSortKey = function($cell) {
  4.         date = $cell.text().replace('-', '');
  5.         date2 = date.replace('-', '');
  6.           var key = date2;
  7.           return isNaN(key) ? 0 : key; 
  8.         };
  9.       }
  10. ?>
[PHP] pobierz, plaintext


dobre to?
ziqzaq
28.12.2008, 22:50:45
W sumie byłem ciekaw jak to zrobić... więc zrobiłem.
Bez parsowania daty, przyjmuje tylko 0000-00-00 (w sumie dodać różne warianty to pestka).
Fajnie jakbyś wcześniej dał przykładowy html żeby nie trzeba było tyle szukać i grzebać w kodzie - trudno, napisałem sobie. ;P
Dodałem sortowanie rosnąco i malejąco po każdym kliknięciu (zaczynając od rosnącego - można to zmienić -, wszystko widać w divie pod tabelką).
[PHP] pobierz, plaintext 
  1. <?php
  2. <html>
  3. <head>
  4. <title>Tit</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <script type="text/javascript" src="sciezka_do_jquery/js/jquery.js"></script>
  7. <script type="text/javascript">
  8. $.fn.alternateRowColors = function() {
  9.     $('tbody tr:odd', this).removeClass('even').addClass('odd');
  10.     $('tbody tr:even', this).removeClass('odd').addClass('even');
  11.     return this;
  12. };
  13.  
  14. $(document).ready(function() {
  15.     var alternateRowColors = function($table) {
  16.         $('tbody tr:odd', $table).removeClass('even').addClass('odd');
  17.         $('tbody tr:even', $table).removeClass('odd').addClass('even');
  18.     };
  19.  
  20.     $('table.sortable').each(function() {
  21.         var $table = $(this);
  22.         $table.alternateRowColors($table);
  23.  
  24.         $('th', $table).each(function(column) {
  25.             var findSortKey;
  26.             
  27.             var xyz = $('#log');
  28.             
  29.             if($(this).is('.sort-alpha')) { 
  30.                 findSortKey = function($cell) {
  31.                     return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
  32.                 };
  33.             }
  34.             else if($(this).is('.sort-numeric')) { 
  35.                 findSortKey = function($cell) {
  36.                     var key = parseFloat($cell.text().replace(/^[^d.]*/, ''));
  37.                     return isNaN(key) ? 0 : key;        
  38.                 };
  39.             }  
  40.             else if($(this).is('.sort-date')) {
  41.                 findSortKey = function($cell) {
  42.                     var dt = $cell.text();
  43.                     var dt_arr = dt.split("-");
  44.                     var key = new Date(dt_arr[0],dt_arr[1],dt_arr[2]);
  45.                     return isNaN(key) ? 0 : key;
  46.                 };
  47.             }
  48.  
  49.             if(findSortKey) {
  50.                 $(this).addClass('clickable').hover(function() {
  51.                     $(this).addClass('hover');
  52.                 }, function() {
  53.                     $(this).removeClass('hover');
  54.                 }).click(function() {
  55.                     var rows = $table.find('tbody > tr').get();
  56.                     $.each(rows, function(index, row) {
  57.                         //xyz.append(column+"<br/>");
  58.                         row.sortKey = findSortKey($(row).children('td').eq(column));
  59.                         //xyz.append(row.sortKey+"<br/>");
  60.                     });
  61.                     var ord = 'asc';
  62.                     if ($(this).hasClass('desc')) {
  63.                         ord = 'desc';
  64.                         $(this).removeClass('desc').addClass('asc');
  65.                     }
  66.                     else $(this).removeClass('asc').addClass('desc');
  67.                     
  68.                     rows.sort(function(a, b) {
  69.                         if (ord == 'asc') {
  70.                         if(a.sortKey < b.sortKey) return -1;
  71.                         if(a.sortKey > b.sortKey) return 1;
  72.                         }
  73.                         else {
  74.                         if(a.sortKey > b.sortKey) return -1;
  75.                         if(a.sortKey < b.sortKey) return 1;
  76.                         }
  77.                         return 0;        
  78.                     });
  79.                     $table.children('tbody').children('tr').remove();
  80.                     $.each(rows, function(index, row) {
  81.                         //$table.children('tbody').remove();
  82.                         $table.children('tbody').append(row);
  83.                         row.sortKey = null;
  84.                     });
  85.                     $table.alternateRowColors($table);
  86.                     var ord_str = (ord == 'asc') ? "rosnąco" : "malejąco";
  87.                     xyz.append("Sortowanie "+ord_str+"<br/>");
  88.                 });
  89.             }
  90.         });
  91.     });
  92. });
  93. </script>
  94. <style type="text/css">
  95. </style>
  96. </head>
  97. <body>
  98. <table class="sortable">
  99. <thead>
  100. <tr><th class="sort-date asc">date</th></tr>
  101. </thead>
  102. <tbody>
  103. <tr><td>2008-12-12</td></tr>
  104. <tr><td>2008-12-11</td></tr>
  105. <tr><td>2008-02-05</td></tr>
  106. <tr><td>2008-07-21</td></tr>
  107. <tr><td>2008-11-21</td></tr>
  108. </tbody>
  109. </table>
  110. <div id="log"></div>
  111. </body>
  112. </html>
  113. ?>
[PHP] pobierz, plaintext
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.