Question

我在Code/SKU列上对表行进行排序。 Code/SKU列可能包含也可能不包含-（破折号），这是我的分隔符。 -之后的3位数代码是我的产品货架编号，前缀介于A-Z之间。我正在尝试根据机架号irrespective of the prefix按升序对产品进行排序。如果缺少机架号，则应将这些产品列在顶部。

例如，如果输入 Code/SKU列包含：

RIN65631-A24
PNT64705
CPC31378-D06

然后输出 Code/SKU column应排序为：

PNT64705
CPC31378-D06
RIN65631-A24

这是我的JSFiddle

如上所述，我得到了所需的输出，但是如果你看看我的JSFiddle，你会看到我正在使用多个调用$(this).find()函数来从DOM中检索一个不需要IMO的特定元素。可能有更好的方法来避免冗余的find（）调用并实现相同的输出。有人可以在这方面帮助我吗？

修改

注意：应该对DOM ready事件执行排序。

Answer 1

使用sortContent jquery PLugin：

 $('td.sku').sortContent({asc:true,
                         target:function(e){
                           return $(e).parent();
                         },helper:function(e){
                            var html=$(e).html().split('-'); 
                            if(html.length===2){return html[1]}
                             else {return ''}    
                          }
 });

请参阅Demo

解释

目标callbak ：您按td元素排序，但tr应排序。所以目标是tr，它是td元素的父级。
帮助：识别要排序的内容

更新：

只对数字字符进行排序，Helper回调应该如下：

var myhelper=function(e){
   var html=$(e).html().split('-'); 
    if(html.length===2){return 'b'+html[1].numeric()}
    else {return 'a'+html[0].numeric()}

};

请参阅Demo v2

Answer 2

$(document).ready(function(){
var th = jQuery('.shortid'),
    inverse = false;

th.click(function(){

    var header = $(this),
        index = header.index();

    header
        .closest('.right-contacts-details')
        .find('.shorting')
        .filter(function(){
            return $(this).index() === index;
        })
        .sort(function(a, b){

            a = $(a).text();
            b = $(b).text();

            return (
                isNaN(a) || isNaN(b) ?
                    a > b : +a > +b
                ) ?
                    inverse ? -1 : 1 :
                    inverse ? 1 : -1;

        }, function(){
            return this.parentNode;
        });

    inverse = !inverse;

});

}）;

Answer 3

使用KnockoutJS。您可以开箱即用。

HTML表行使用jQuery自定义排序

3 个答案: