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,0或1，而不是true或false
您正在检索第一个名称，而不是最后名称。

相反：

＆＃13;

$(".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);
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我想我已经有点迟了，因为保罗已经首先贡献了他的结果。不过，这是另一种排序方式（现在名称首先按姓氏排序，然后按名字排序）。也许你仍然可以在这里找到一些有趣的点。

＆＃13;

$('#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);
});

＆＃13;

<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>

＆＃13;

按ASC或DESC订单

2 个答案: