Javascript 排序在有'时保持移动行；s 11+；排

请参阅下面提供的JSFIDLE链接中的代码

有很多方法可以使用javascript（+jquery）对表进行排序。我开始使用James Padolsey的jquery排序插件。我不得不修改他的演示代码，因为它没有检查相等性（它只检查大于和小于）

一切正常，直到表中有11+行，其中3行是相同的。每次排序后，3行不断地移动；继续点击“水果”并注意到“苹果”行正在移动。如果删除其中一个表格行，则移动停止和排序是正确的

我开始考虑是否可以编写自己的排序并使用js数组排序，我遇到了同样的问题。请注意，我只按第一列排序，每次单击表头时都按升序排序。每次上升，它仍然在移动“苹果”行

这似乎是一个Javascript数组排序问题（因为James的插件也在使用它）？有人知道这件事还是我做错了

---

如果要对多个列进行排序，则。JavaScript没有做任何你没有告诉它去做的事情

$('th').click(function(){
    var header = $(this);
    // only sorting the by the 1st column (for now) and in ascending only
    header.closest('table').find('tbody tr').sort(function(a, b) {
        var compA = $(a).find('td:first-child').text().toUpperCase();
        var compB = $(b).find('td:first-child').text().toUpperCase();
        var compC = +$(a).find('td:first-child').next().text();
        var compD = +$(b).find('td:first-child').next().text();

        if(compA < compB) { 
            return -1;
        }
        else if(compA > compB) {
            return 1;
        }
        else if(compC < compD) { 
            return -1;
        }
        else if(compC > compD) {
            return 1;
        }
        else {
            return 0;
        }
    }).appendTo(header.closest('table')); 
});

$（'th'）。单击（函数（）{
var头=$（这是）；
//仅按第1列排序（目前），仅按升序排序
header.closest（'table'）.find（'tbody tr'）.sort（函数（a，b）{
var compA=$（a）.find（'td:first child'）.text（）.toUpperCase（）；
var compB=$（b）.find（'td:first child'）.text（）.toUpperCase（）；
var compC=+$（a）.find（'td:first child'）.next（）.text（）；
var compD=+$（b）.find（'td:first child'）.next（）.text（）；
如果（compAcompB）{
返回1；
}
如果（compCcompD）{
返回1；
}
否则{
返回0；
}
}).appendTo（header.closest（'table'）；
});

---

来自jQuery 1.7的源代码：

// For internal use only.
// Behaves like an Array's method, not like a jQuery method.
sort: [].sort,

相反，请尝试以下方法：

/**
*jQuery.fn.sorteElements
* --------------
* http://james.padolsey.com/javascript/sorting-elements-with-jquery/
*@param函数比较器：
*与[1,2,3]的行为完全相同。排序（比较器）
*   
*@param函数getSortable
*一个函数，它应该返回
*待分类。比较器将在计算机上运行
*当前集合，但您可能需要实际的
*在父级或另一级上进行的结果排序
*关联元素。
*   
*例如$（'td'）。分拣元件（比较器，函数（）{
*返回此.parentNode；
*   })
*   
*将对的父对象（）进行排序
*它本身。
*/
jQuery.fn.sortElements=（函数（）{
var sort=[].sort；
返回函数（比较器，getSortable）{
getSortable=getSortable | | function（）{返回this；}；
var placements=this.map（函数（）{
var sortlement=getSortable.call（this），
parentNode=sortElement.parentNode，
//由于元素本身会改变位置，我们有
//以某种方式将其原始位置存储在
//DOM。最简单的方法是使用“标志”节点：
nextSibling=parentNode.insertBefore(
document.createTextNode（“”），
sortElement.nextSibling
);
返回函数（）{
if（parentNode==此）{
抛出新错误(
“如果任何一个元素是另一个的后代，则无法对其进行排序。”
);
}
//在标志前插入：
parentNode.insertBefore（此，下一个sibling）；
//删除标志：
parentNode.removeChild（下一个sibling）；
};
});
返回sort.call（this，comparator）.each（函数（i）{
placements[i].call（getSortable.call（this））；
});
};
})();

如果我正在排序的当前数据相等，我会对其他列进行排序。我还决定修改James的演示代码来支持它（不是他的插件代码）

下面的递归函数支持表中的两列以上。它将通过列进行排序，如果等于，则继续到下一列，以此类推

function calc(a, b, first) {
    var valueA = $(a).text(),
        valueB = $(b).text();

    if(valueA == valueB) {
        // 1st time calling & sort is not on 1st column so sort the first by column
        if(first && (index != 0)) {
            return calc(a.parent().children().eq(0), b.parent().children().eq(0));
        }

        // no more columns to sort, both rows are exactly the same
        if(a.index() == th.length - 1) { 
            return 0; 
        }

        // sort by the next column
        return calc(a.next(), b.next());
    } else {
        return (isNaN(valueA) || isNaN(valueB) ? valueA > valueB : +valueA > +valueB) ? inverse ? -1 : 1 : inverse ? 1 : -1;
    }
}

---

这就是我要做的修复。我只是不明白为什么js在已经对“Apple”进行了asc排序之后还要再次对其进行排序？@user1118188，因为JavaScript

sort

函数可能不会按照与您相同的顺序查看数组元素。如果是这样的话，那么为什么10行或更少的行可以正常工作，而超过11行的任何行都不能正常工作？我真的认为这是一个js排序错误。那么欢迎您将其作为一个提交。只是不要期望他们会改变任何东西，因为从技术上讲，你的结果正是你的代码所要求的。我太懒了，不愿意经历向他们提交bug的过程。但是通过在排序中返回0，我希望每次执行排序时位置都相同。在这种情况下，10行或更少，但不是11行或更多，这让我感到困惑@mblase75，谢谢你的帮助。嗯，我说过我在使用他的插件，但遇到了同样的问题。但是如果你读他的代码，它使用的是[].sort.Yes，我注意到了；对不起，如果我不是很清楚；我认为[].sort（）在这里是不够的，我认为您应该尝试一个更复杂的插件。

function calc(a, b, first) {
    var valueA = $(a).text(),
        valueB = $(b).text();

    if(valueA == valueB) {
        // 1st time calling & sort is not on 1st column so sort the first by column
        if(first && (index != 0)) {
            return calc(a.parent().children().eq(0), b.parent().children().eq(0));
        }

        // no more columns to sort, both rows are exactly the same
        if(a.index() == th.length - 1) { 
            return 0; 
        }

        // sort by the next column
        return calc(a.next(), b.next());
    } else {
        return (isNaN(valueA) || isNaN(valueB) ? valueA > valueB : +valueA > +valueB) ? inverse ? -1 : 1 : inverse ? 1 : -1;
    }
}