Проблема с столбцом даты сортировки (ММ / ДД / ГГГГ) в таблице HTML с jQuery - PullRequest
Новая
       6

Проблема с столбцом даты сортировки (ММ / ДД / ГГГГ) в таблице HTML с jQuery

0 голосов
/ 16 мая 2011

Я использую скрипт сортировки jQuery Джеймса Падолси для таблицы HTML на странице ASP.NET.Я не могу использовать другие сценарии сортировки таблиц из-за некоторых шаблонных ограничений.

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

Вот сценарий, который я использую: 

(function($){  
    $.fn.sortElements = (function(){

        var sort = [].sort;

        return function(comparator, getSortable) {

            getSortable = getSortable || function(){return this;};

            var placements = this.map(function(){

                var sortElement = getSortable.call(this),
                    parentNode = sortElement.parentNode,

                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );

                return function() {

                    if (parentNode === this) {
                        throw new Error(
                            "You can't sort elements if any one is a descendant of another."
                        );
                    }

                    // Insert before flag:
                    parentNode.insertBefore(this, nextSibling);
                    // Remove flag:
                    parentNode.removeChild(nextSibling);

                };

            });

            return sort.call(this, comparator).each(function(i){
                placements[i].call(getSortable.call(this));
            });

        };

    })();

    $.fn.tablesort = (function(options) {
        return this.each(function() {  
            var table = $(this);
            $(this).find('thead th').wrapInner('<a href="#"/>').find('a').click(function(){
              var sort = $(this).data('sort');
              $(this).parents('thead').find('a').removeClass('sort-asc sort-desc');
              sort = (sort=='asc'? 'desc' : (sort=='desc'? 'asc' : 'asc'));
              $(this).data('sort', sort).addClass('sort-'+sort);
              table.find('tbody tr td').removeClass('column-selected');
              table.find('tbody tr td:nth-child('+($(this).parent().index()+1)+')').sortElements(
                function(a, b){
                    return sort=='desc'? ($(a).text() < $(b).text()) - ($(a).text() > $(b).text()) : ($(a).text() > $(b).text()) - ($(a).text() < $(b).text());
                },
                function(){
                    return this.parentNode; 
                }
              ).addClass('column-selected');
              return false;
            });
            return $(this);
        });
    });

})(jQuery);

И здесьэто упрощенный код таблицы: 

<table class="datatable paginate sortable full">
<thead>
<tr>
<th>Product Name</th>
<th>Product Type</th>
<th>Assembled On</th>
</tr>
</thead>
<tbody>
<tr>
<td>
...
</td>
</tr>
</table>

Первые два столбца сортируются правильно, но 3-й столбец сортируется неправильно.

3-й столбец является полем даты, и форматММ / ДД / ГГГГ (например, 3/12/2009 и 3/9/2009).

В таблице правильная сортировка должна быть такой же, как 21.02.2009, 3/9/2009 и 3/12/ 2009;но текущий скрипт делает это: 21.02.2009, 3/12/2009 и 3/9/2009.

Я попытался добавить некоторые парсеры, но безуспешно.Как я могу решить эту проблему?

PS: я не эксперт по jQuery.

Спасибо за помощь.

Ответы [ 2 ]

1 голос
/ 16 мая 2011

Похоже, что ваш вид выходит в алфавитном порядке, а не в цифровом (или буквенно-цифровом).

Насколько я вижу, вы сортируете даты в целом, и я предполагаю, что косая черта делает сортировку JS по алфавиту.

Если вы разделите даты и отсортируете их по дням, месяцам и годам по отдельности, это должно работать лучше.

Я не пробовал решение amit_g. Это, вероятно, работает нормально. Я просто хотел объяснить, что, по моему мнению, является причиной того, что ваш код не сделал того, что вы ожидали ...:)

1 голос
/ 16 мая 2011

Добавить класс для обозначения столбца как даты ... 

<table class="datatable paginate sortable full">
<thead>
<tr>
<th>Product Name</th>
<th>Product Type</th>
<th class="date">Assembled On</th> <!-- added a class="date" to mark this col as date -->
</tr>
</thead>

, затем немного изменить функцию на 

$.fn.tablesort = (function(options) {
    return this.each(function() {  
        var table = $(this);
        $(this).find('thead th').wrapInner('<a href="#"/>').find('a').click(function(){
          var sort = $(this).data('sort');
          var isColDate = $(this).parent().hasClass("date");

          $(this).parents('thead').find('a').removeClass('sort-asc sort-desc');
          sort = (sort=='asc'? 'desc' : (sort=='desc'? 'asc' : 'asc'));
          $(this).data('sort', sort).addClass('sort-'+sort);
          table.find('tbody tr td').removeClass('column-selected');
          table.find('tbody tr td:nth-child('+($(this).parent().index()+1)+')').sort(
            function(a, b){

                if (isColDate) {
                    a = new Date($(a).text());
                    b = new Date($(b).text());
                }
                else {
                    a = $(a).text();
                    b = $(b).text();
                }

                return sort=='desc'? (a < b) : (a > b);
            },
            function(){
                return this.parentNode; 
            }
          ).addClass('column-selected');
          return false;
        });
        return $(this);
    });
});
...