Jquery 如何在更改输入时按状态号、日期和时间对列表进行排序[type="；radio"；]？

我需要帮助来实现此排序功能。我找到了一些关于排序列表的线程，但我无法将它们用于以下情况：

• 按状态排序时：

按状态排序>按日期的每个状态顺序>按时间的每个日期顺序

• 按状态排序时

按日期排序>每个日期按时间排序

• 按更改日期排序时

按更改日期排序>每个更改日期按更改时间排序

HTML排序菜单

<div class="sort">
    <label><input type="radio" name="sort" id="sort-1"/>By Status</label>
    <label><input type="radio" name="sort" id="sort-2"/>By Date</label>
    <label><input type="radio" name="sort" id="sort-3"/>By Date of Change</label>
</div>

JSFiddle:

---

请提出建议。

我已经使用jQuery的

排序功能编写了一个解决方案：

$('.sort').on('change', '[name="sort"]', function() {
    var sorter = $(this).attr('id');
    $('#sortThis li').sort(function(a, b) {
        /*
        Date d/m/Y to Y-m-d convertion :
        "09/12/2014"
            .split('/')    => ["09", "12", "2014"]
            .reverse()     => ["2014", "12", "09"]
            .join('-')     => "2014-12-09"
         This way we can compare dates alphabetically
        */        
        var astatus = $('a', a).data('status'),
            bstatus = $('a', b).data('status'),
            adate = $('a', a).data('date').split('/').reverse().join('-'),
            bdate = $('a', b).data('date').split('/').reverse().join('-'),
            atime = $('a', a).data('time'),
            btime = $('a', b).data('time');
        if (sorter == 'sort-status') { // sort by status > date > time
            if (astatus == bstatus) {
                if (adate == bdate) {
                    return atime < btime ? 1 : -1;
                } else {
                    return adate < bdate ? 1 : -1;
                }
            } else {
                return astatus < bstatus ? 1 : -1
            }
        } else if (sorter == 'sort-date') { // sort by date > time
            if (adate == bdate) {
                return atime < btime ? 1 : -1;
            } else {
                return adate < bdate ? 1 : -1;
            }
        } else if (sorter == 'sort-change') { // sort by change date > change time
            var achangedate = $('a', a).data('change-date').split('/').reverse().join('-'),
                bchangedate = $('a', b).data('change-date').split('/').reverse().join('-'),
                achangetime = $('a', a).data('change-time'),
                bchangetime = $('a', b).data('change-time')
            ;
            if (achangedate == bchangedate) {
                return achangetime < bchangetime ? 1 : -1;
            } else {
                return achangedate < bchangedate ? 1 : -1;
            }
        }
    }).appendTo('#sortThis');
});

$（'.sort'）。在（'change'，'name=“sort”]'，函数（）上{
var-sorter=$（this.attr（'id'）；
$（'#sorttthis li'）.sort（函数（a，b）{
/*
d/m/Y至Y-m-d转换日期：
"09/12/2014"
.split（“/”）=>[“09”、“12”、“2014”]
.reverse（）=>[“2014”、“12”、“09”]
.加入（'-'）=>“2014-12-09”
这样我们可以按字母顺序比较日期
*/        
var astatus=$（'a'，a）.data（'status'），
b状态=$（'a'，b）.data（'status'），
adate=$（'a'，a）.data（'date'）.split（'/'）.reverse（）.join（'-'），
bdate=$（'a'，b）.data（'date'）.split（'/'）.reverse（）.join（'-'），
atime=$（'a'，a）.data（'time'），
b时间=$（'a'，b）.data（'time'）；
如果（分拣机==“分拣状态”）{//按状态排序>日期>时间
如果（astatus==bstatus）{
if（adate==bdate）{
返回时间time
if（adate==bdate）{
返回时间change time
var achangedate=$（'a'，a）.data（'change-date'）.split（'/'）.reverse（）.join（'-'），
b更改日期=$（'a'，b）.数据（'change-date'）.split（'/'）.reverse（）.join（'-'），
achangetime=$（'a'，a）.data（'change-time'），
bchangetime=$（'a'，b）.data（'change-time'）
;
如果（achangedate==bchangedate）{
返回achangetime

检查此解决方案：

jQuery:

$(function() {
    $('.sort').on('change','[name="sort"]',function(){
        if($(this).attr('id') == 'sort-1'){
            //sort by STATUS > each status order by DATE > each date order by TIME
            sortStatus()
        }
        if($(this).attr('id') == 'sort-2'){
            //sort by DATE > each date sort by TIME

            sortDate()
        }
        if($(this).attr('id') == 'sort-3'){
           sortDateChange()
        }
    });


})

function sortStatus()
{
   var $wrapper = $('ul li');

    $wrapper.sort(function (a, b) {
        var sA =parseInt( $(a).find('a').attr('data-status'),10 );
        var sB =parseInt( $(b).find('a').attr('data-status'),10 );

        return sA < sB ? 1 : -1;
    })

    $('ul').append($wrapper)
}

function sortDate()
{
    var $wrapper = $('ul li');

    $wrapper.sort(function (a, b) {

        var dA = $(a).find('a').attr('data-date')
        var dB = $(b).find('a').attr('data-date')

        var tA = $(a).find('a').attr('data-time');
        var tB = $(b).find('a').attr('data-time');        

        var parts = dA.split("/");        
        var dtA = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tA).getTime();

        var parts = dB.split("/");        
        var dtB = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tB).getTime();

        return dtA < dtB ? 1 : -1;
    })

    $('ul').append($wrapper)        
}

function sortDateChange()
{        
    var $wrapper = $('ul li');

    $wrapper.sort(function (a, b) {

        var dA = $(a).find('a').attr('data-change-date')
        var dB = $(b).find('a').attr('data-change-date')

        var tA = $(a).find('a').attr('data-change-time');
        var tB = $(b).find('a').attr('data-change-time');

        var parts = dA.split("/");        
        var dtA = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tA).getTime();


        var parts = dB.split("/");        
        var dtB = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tB).getTime();


        return dtA < dtB ? 1 : -1;
    })

   $('ul').append($wrapper)        
}

$（函数（）{
$（'.sort'）。在（'change'，'[name=“sort”]'，函数（）上{
if（$（this.attr（'id'）=='sort-1'））{
//按状态排序>按日期的每个状态顺序>按时间的每个日期顺序
sortStatus（）
}
if（$（this.attr（'id'）=='sort-2'）{
//按日期排序>每个日期按时间排序
sortDate（）
}
if（$（this.attr（'id'）=='sort-3'）{
sortDateChange（）
}
});
})
函数sortStatus（）
{
var$wrapper=$（'ul li'）；
$wrapper.sort（函数（a，b）{
var sA=parseInt（$（a）.find（'a'）.attr（'data-status'），10）；
var sB=parseInt（$（b）.find（'a'）.attr（'data-status'），10）；
返回sA
很好的解决方案。非常感谢。
$('.sort').on('change', '[name="sort"]', function() {
    var sorter = $(this).attr('id');
    $('#sortThis li').sort(function(a, b) {
        /*
        Date d/m/Y to Y-m-d convertion :
        "09/12/2014"
            .split('/')    => ["09", "12", "2014"]
            .reverse()     => ["2014", "12", "09"]
            .join('-')     => "2014-12-09"
         This way we can compare dates alphabetically
        */        
        var astatus = $('a', a).data('status'),
            bstatus = $('a', b).data('status'),
            adate = $('a', a).data('date').split('/').reverse().join('-'),
            bdate = $('a', b).data('date').split('/').reverse().join('-'),
            atime = $('a', a).data('time'),
            btime = $('a', b).data('time');
        if (sorter == 'sort-status') { // sort by status > date > time
            if (astatus == bstatus) {
                if (adate == bdate) {
                    return atime < btime ? 1 : -1;
                } else {
                    return adate < bdate ? 1 : -1;
                }
            } else {
                return astatus < bstatus ? 1 : -1
            }
        } else if (sorter == 'sort-date') { // sort by date > time
            if (adate == bdate) {
                return atime < btime ? 1 : -1;
            } else {
                return adate < bdate ? 1 : -1;
            }
        } else if (sorter == 'sort-change') { // sort by change date > change time
            var achangedate = $('a', a).data('change-date').split('/').reverse().join('-'),
                bchangedate = $('a', b).data('change-date').split('/').reverse().join('-'),
                achangetime = $('a', a).data('change-time'),
                bchangetime = $('a', b).data('change-time')
            ;
            if (achangedate == bchangedate) {
                return achangetime < bchangetime ? 1 : -1;
            } else {
                return achangedate < bchangedate ? 1 : -1;
            }
        }
    }).appendTo('#sortThis');
});

$(function() {
    $('.sort').on('change','[name="sort"]',function(){
        if($(this).attr('id') == 'sort-1'){
            //sort by STATUS > each status order by DATE > each date order by TIME
            sortStatus()
        }
        if($(this).attr('id') == 'sort-2'){
            //sort by DATE > each date sort by TIME

            sortDate()
        }
        if($(this).attr('id') == 'sort-3'){
           sortDateChange()
        }
    });


})

function sortStatus()
{
   var $wrapper = $('ul li');

    $wrapper.sort(function (a, b) {
        var sA =parseInt( $(a).find('a').attr('data-status'),10 );
        var sB =parseInt( $(b).find('a').attr('data-status'),10 );

        return sA < sB ? 1 : -1;
    })

    $('ul').append($wrapper)
}

function sortDate()
{
    var $wrapper = $('ul li');

    $wrapper.sort(function (a, b) {

        var dA = $(a).find('a').attr('data-date')
        var dB = $(b).find('a').attr('data-date')

        var tA = $(a).find('a').attr('data-time');
        var tB = $(b).find('a').attr('data-time');        

        var parts = dA.split("/");        
        var dtA = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tA).getTime();

        var parts = dB.split("/");        
        var dtB = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tB).getTime();

        return dtA < dtB ? 1 : -1;
    })

    $('ul').append($wrapper)        
}

function sortDateChange()
{        
    var $wrapper = $('ul li');

    $wrapper.sort(function (a, b) {

        var dA = $(a).find('a').attr('data-change-date')
        var dB = $(b).find('a').attr('data-change-date')

        var tA = $(a).find('a').attr('data-change-time');
        var tB = $(b).find('a').attr('data-change-time');

        var parts = dA.split("/");        
        var dtA = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tA).getTime();


        var parts = dB.split("/");        
        var dtB = new Date(parts[2]+'-'+parts[1]+'-'+ parts[0]+'T'+tB).getTime();


        return dtA < dtB ? 1 : -1;
    })

   $('ul').append($wrapper)        
}