Блог

Я использую скрипт сортировки 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/12/2009 и 3/9/2009).

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

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

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

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

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

 <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);
    });
});
  

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

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

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

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