javascript - 按姓氏 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>