姓氏順序表（按ASC或DESC順序排列）

Question

我遇到的問題是表格未按ASC或DESC順序正確排序。

它的工作方式是，如果單擊“向上”或“向下”箭頭，則應該以正確的順序對表值進行重新排序。

到目前為止，我得到的是：

的HTML

<table class="table table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
     <tr>
       <th class="sortable orderNameByASC">Patients</th>
       <th>Pathway Date</th>
       <th>Discharge Date</th>
       <th class="showAllTeam">Team Name</th>
     </tr>
</thead>
<tbody>                                   
</tbody>
</table>

CSS中的向上和向下箭頭

#dataTables-example th.orderNameByASC:after
{
    content:'▲';
    display:inline-block;
    padding:0 .5em;
    color:green;
}

#dataTables-example th.orderNameByDESC:after
{
    content:'▼';
    display:inline-block;
    padding:0 .5em;
    color:green;
}

的JavaScript

$(".sortable").click(function()
{
    var clickedSorting = $(this).hasClass('orderNameByASC') ? 'orderNameByDESC' : 'orderNameByASC';
    $('.sortable').removeClass('orderNameByASC').removeClass('orderNameByDESC');
    $(this).addClass(clickedSorting);

    var columnIndex = $(this).prevAll().length;
    var tableBody = $(this).closest("table").find("tbody");
    var tableRow = tableBody.find("tr");

    tableRow.sort(function(a, b)
    {   
        console.log($(a).find("td").eq(columnIndex).text().substr(0, $(a).find("td").eq(columnIndex).text().indexOf(' ')));
        var A = $(a).find("td").eq(columnIndex).text().substr(0, $(a).find("td").eq(columnIndex).text().indexOf(' '));
        var B = $(b).find("td").eq(columnIndex).text().substr(0, $(b).find("td").eq(columnIndex).text().indexOf(' '));

        if (!isNaN(A)) A = Number(A);
        if (!isNaN(B)) B = Number(B);

        return clickedSorting == 'orderNameByASC' ? A > B : B > A;
    });

    $.each(tableRow, function(key, value)
    {
        tableBody.append(value);
    });
});

在ASC輸出中訂購

Nettie Allen (03742739747)
Amy Clark 
George Allen (0866423839)
Baby Clark
Ann Baker (64636596952)
Baby Baker (07534799622)
Samantha Bond (0119293625)
Baby Bond (02764820182)
Ann Butler (7524575766)
Nicole Campbell (9373736281)
Peter Campbell (8257483511)

在DESC輸出中的順序：

Nicole Campbell (9373736281)
Peter Campbell (8257483511)
Nettie Allen (03742739747)
George Allen (0866423839)
Ann Baker (64636596952)
Baby Baker (07534799622)
Samantha Bond (0119293625)
Ann Butler (7524575766)
Baby Bond (02764820182)
Amy Clark 

擺弄示例數據：

https://jsfiddle.net/zr7x1rk6/

Answer 1

1. 您正在嘗試對字符串進行數字比較。 不要那樣做
2. 您需要返回-1、0或1，而不是true或false
3. 你檢索的第一個名字，沒有姓氏 。

代替：

 $(".sortable").click(function() { var clickedSorting = $(this).hasClass('orderNameByASC') ? 'orderNameByDESC' : 'orderNameByASC'; $('.sortable').removeClass('orderNameByASC').removeClass('orderNameByDESC'); $(this).addClass(clickedSorting); var columnIndex = $(this).prevAll().length; var tableBody = $(this).closest("table").find("tbody"); var tableRow = tableBody.find("tr"); tableRow.sort(function(a, b) { var aText = $(a).find("td").eq(columnIndex).text(); var bText = $(b).find("td").eq(columnIndex).text(); // get the last name. May need to do something more complicated // if you want to skip middle names var A = aText.substr(aText.indexOf(' ')); var B = bText.substr(bText.indexOf(' ')); if (clickedSorting == 'orderNameByASC') return A.localeCompare(B); else return B.localeCompare(A); }); $.each(tableRow, function(key, value) { tableBody.append(value); }); }); 

 #dataTables-example th.orderNameByASC:after { content: '▲'; display: inline-block; padding: 0 .5em; color: green; } #dataTables-example th.orderNameByDESC:after { content: '▼'; display: inline-block; padding: 0 .5em; color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table class="table table table-striped table-bordered table-hover" id="dataTables-example"> <thead> <tr> <th class="sortable orderNameByASC">Patients</th> </tr> </thead> <tbody> <tr> <td>Amy Clark (9655382022)</td> </tr> <tr> <td>Baby Clark (08653271111)</td> </tr> <tr> <td>Lisa Cook (6395768765)</td> </tr> <tr> <td>Jane Cooper (835251946)</td> </tr> <tr> <td>Jasmine Gill (7528696977)</td> </tr> <tr> <td>Javier Romero (62794639279)</td> </tr> <tr> <td>Baby baby Floyd (75211256890)</td> </tr> <tr> <td>Baby Gill (8644790977)</td> </tr> </tbody> </table> 

Answer 2

我想我已經有點晚了，因為保羅已經首先貢獻了他的成績。 仍然，這是進行排序的另一種方法（現在，名稱首先按姓氏排序，然后按名字排序）。 也許您仍然可以在這里找到一些有趣的觀點。

 $('#down').change(function(){ var desc=$(this).prop('checked')?-1:1; // ascending or descending order? arr=$.makeArray($('table tr')); arr.sort(function(a,b){ // local name extrating function: x is the tr-DOM element var n=function(x){var ar=$('td:eq(0)',x).text() .toLowerCase().split(' '); return ar[1]+ar[0];}; var aa=n(a), bb=n(b); return aa==bb? 0 : (aa>bb ? 1 : -1)*desc; }); $('table').html(arr); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="down">descending order <table> <tr><td>Nettie Allen</td><td>(03742739747)</td></tr> <tr><td>Amy Clark</td><td> </td></tr> <tr><td>George Allen</td><td>(0866423839)</td></tr> <tr><td>Baby Clark</td><td></td></tr> <tr><td>Ann Baker</td><td>(64636596952)</td></tr> <tr><td>Baby Baker</td><td>(07534799622)</td></tr> <tr><td>Samantha Bond</td><td>(0119293625)</td></tr> <tr><td>Baby Bond</td><td>(02764820182)</td></tr> <tr><td>Ann Butler</td><td>(7524575766)</td></tr> <tr><td>Nicole Campbell</td><td>(9373736281)</td></tr> <tr><td>Peter Campbell</td><td>(8257483511)</td></tr> </table>