Question

我正在使用James Padolsey的jQuery排序脚本来处理ASP.NET页面中的HTML表格。由于某些模板限制，我无法使用其他表格排序脚本。

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列是日期字段，格式为MM / DD / YYYY（如3/12/2009和3/9/2009）。

在表格中，正确的分类应该像2/21/2009,3 / 9/2009和3/12/2009;但是目前的剧本是：2/21 / 2009,3 / 12/2009和3/9/2009。

我尝试添加一些解析器但没有成功。我该如何解决这个问题？

PS：我不是jQuery专家。

感谢您提供所有帮助。

Answer 1

添加一个类以将列指定为日期...

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

Answer 2

看起来您的排序按字母顺序排列，而不是数字（或字母数字）。

据我所知，你是整个日期的排序，我猜这些斜杠正在按字母顺序排序。

如果您将日期分开，并分别按天，月和年排序，则应该更好。

我没有尝试过amit_g的解决方案。它可能工作正常。我只是想解释一下我认为你的代码没有达到预期效果的原因......：）

使用jQuery在HTML表中排序日期（MM / DD / YYYY）列的问题

2 个答案: