[jquery] problem z sortowaniem wedlug daty Opcje

[trucksweb]

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 
<?php
$.fn.alternateRowColors = function() {
    $('tbody tr:odd', this).removeClass('even').addClass('odd');
    $('tbody tr:even', this).removeClass('odd').addClass('even');
    return this;
};
 
$(document).ready(function() {
 
 var alternateRowColors = function($table) {
    $('tbody tr:odd', $table).removeClass('even').addClass('odd');
    $('tbody tr:even', $table).removeClass('odd').addClass('even');
  };
  
  $('table.sortable').each(function() {
    var $table = $(this);
    $table.alternateRowColors($table);
    
    $('th', $table).each(function(column) {
      var findSortKey;
      
      if($(this).is('.sort-alpha')) { 
      
        findSortKey = function($cell) {
          return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
        };
       }
      else if($(this).is('.sort-numeric')) { 
        findSortKey = function($cell) {
          var key = parseFloat($cell.text().replace(/^[^d.]*/, ''));
          return isNaN(key) ? 0 : key;        
        };
       }  
      else if($(this).is('.sort-date')) {
        findSortKey = function($cell) {
          var dateTest = [
                        { regExp:/^(0?[1-9]|1[012])([- /.])(0?[1-9]|[12][0-9]|3[01])([- /.])((dd)?dd)$/, d:3, m:1, y:5 },  // mdy
                        { regExp:/^(0?[1-9]|[12][0-9]|3[01])([- /.])(0?[1-9]|1[012])([- /.])((dd)?dd)$/, d:1, m:3, y:5 },  // dmy
                        { regExp:/^(dddd)([- /.])(0?[1-9]|1[012])([- /.])(0?[1-9]|[12][0-9]|3[01])$/, d:5, m:3, y:1 }      // ymd
                        ];
                var start, cnt = 0, numFormats = dateTest.length;
                while(cnt < numFormats) {
                        start = (cnt + (favourDMY ? numFormats + 1 : numFormats)) % numFormats;
                        if(dateIn.match(dateTest[start].regExp)) {
                                res = dateIn.match(dateTest[start].regExp);
                                y = res[dateTest[start].y];
                                m = res[dateTest[start].m];
                                d = res[dateTest[start].d];
                                if(m.length == 1) m = "0" + String(m);
                                if(d.length == 1) d = "0" + String(d);
                                if(y.length != 4) y = (parseInt(y) < 50) ? "20" + String(y) : "19" + String(y);
 
                                return Date.parse(y+String(m)+d;
                        };
                        cnt++;
                };
                return 0;   
        };
      }
       
       if(findSortKey) {
        $(this).addClass ('clickable').hover(function() {
          $(this).addClass('hover');
        }, function() {
          $(this).removeClass('hover');
        }).click(function() {
          var rows = $table.find('tbody > tr').get();
          
          $.each(rows, function(index, row) {
            row.sortKey = findSortKey($(row).children('td').eq(column));
          });
          
          rows.sort(function(a, b) {                    
            if(a.sortKey < b.sortKey) return -1;
            if(a.sortKey > b.sortKey) return 1;   
            return 0;        
          });
          $.each(rows, function(index, row) {
            $table.children('tbody').append(row);
            row.sortKey = null;
          });
          $table.alternateRowColors($table);
        });
      }
    });
  });
});
?>
[PHP] pobierz, plaintext 

moze ktos zauwazy w czym problem ? (chodzi wylacznie o sortowanie wg daty)

[ziqzaq]

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 
<?php
<html>
<head>
<title>Tit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="sciezka_do_jquery/js/jquery.js"></script>
<script type="text/javascript">
$.fn.alternateRowColors = function() {
    $('tbody tr:odd', this).removeClass('even').addClass('odd');
    $('tbody tr:even', this).removeClass('odd').addClass('even');
    return this;
};
 
$(document).ready(function() {
    var alternateRowColors = function($table) {
        $('tbody tr:odd', $table).removeClass('even').addClass('odd');
        $('tbody tr:even', $table).removeClass('odd').addClass('even');
    };
 
    $('table.sortable').each(function() {
        var $table = $(this);
        $table.alternateRowColors($table);
 
        $('th', $table).each(function(column) {
            var findSortKey;
            
            var xyz = $('#log');
            
            if($(this).is('.sort-alpha')) { 
                findSortKey = function($cell) {
                    return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
                };
            }
            else if($(this).is('.sort-numeric')) { 
                findSortKey = function($cell) {
                    var key = parseFloat($cell.text().replace(/^[^d.]*/, ''));
                    return isNaN(key) ? 0 : key;        
                };
            }  
            else if($(this).is('.sort-date')) {
                findSortKey = function($cell) {
                    var dt = $cell.text();
                    var dt_arr = dt.split("-");
                    var key = new Date(dt_arr[0],dt_arr[1],dt_arr[2]);
                    return isNaN(key) ? 0 : key;
                };
            }
 
            if(findSortKey) {
                $(this).addClass('clickable').hover(function() {
                    $(this).addClass('hover');
                }, function() {
                    $(this).removeClass('hover');
                }).click(function() {
                    var rows = $table.find('tbody > tr').get();
                    $.each(rows, function(index, row) {
                        //xyz.append(column+"<br/>");
                        row.sortKey = findSortKey($(row).children('td').eq(column));
                        //xyz.append(row.sortKey+"<br/>");
                    });
                    var ord = 'asc';
                    if ($(this).hasClass('desc')) {
                        ord = 'desc';
                        $(this).removeClass('desc').addClass('asc');
                    }
                    else $(this).removeClass('asc').addClass('desc');
                    
                    rows.sort(function(a, b) {
                        if (ord == 'asc') {
                        if(a.sortKey < b.sortKey) return -1;
                        if(a.sortKey > b.sortKey) return 1;
                        }
                        else {
                        if(a.sortKey > b.sortKey) return -1;
                        if(a.sortKey < b.sortKey) return 1;
                        }
                        return 0;        
                    });
                    $table.children('tbody').children('tr').remove();
                    $.each(rows, function(index, row) {
                        //$table.children('tbody').remove();
                        $table.children('tbody').append(row);
                        row.sortKey = null;
                    });
                    $table.alternateRowColors($table);
                    var ord_str = (ord == 'asc') ? "rosnąco" : "malejąco";
                    xyz.append("Sortowanie "+ord_str+"<br/>");
                });
            }
        });
    });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<table class="sortable">
<thead>
<tr><th class="sort-date asc">date</th></tr>
</thead>
<tbody>
<tr><td>2008-12-12</td></tr>
<tr><td>2008-12-11</td></tr>
<tr><td>2008-02-05</td></tr>
<tr><td>2008-07-21</td></tr>
<tr><td>2008-11-21</td></tr>
</tbody>
</table>
<div id="log"></div>
</body>
</html>
?>
[PHP] pobierz, plaintext 

Ten post edytował ziqzaq 28.12.2008, 22:56:28