javascript - jQuery 按特定属性对数据进行排序

Question

我正在尝试按特定属性对 jQuery 中的数据进行排序，如下所示:

<table id="tableSellers" class="table table-striped jambo_table bulk_action">
  <thead>
    <tr class="headings">
      <th class="column-title"><h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
      <th></th>
      <th class="column-title"> <h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
      <th class="column-title"><h4><i class="fa fa-star feedbackClick"></i></h4></th>      
    </tr>
  </thead>
  <tbody class="testWrapper">
    @foreach (var item in ViewBag.rezultati)
    {
      <tr class="test" sale=@item.SaleNumber feedback=@item.Feedback>
        <td>
          <a href="http://ebay.com/usr/@item.StoreName" target="_blank">@item.StoreName</a>
        </td>
        <td>
          <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="@item.StoreName" data-original-title="Analyze competitor">
              <i class="fa fa-bar-chart-o"></i>
          </button>
        </td>
        <td>
          <b>
            @item.SaleNumber
          </b>
        </td>
        <td><b>@item.Feedback</b></td>
      </tr>
    }
  </tbody>
</table>

这是我当前用于对数据进行排序的代码，但它无法按照我想要的方式工作:

$(".feedbackClick").click(function () {
  var $wrapper = $('.testWrapper');
  $wrapper.find('.test').sort(function (a, b) {
     return +a.feedback - +b.feedback;
  })
  .appendTo($wrapper);
});

这只是对整个表中的 1 项进行排序(或者其他什么，我不太确定？)

有人可以帮我解决这个问题吗？

编辑:这是渲染的 tr 标签:

<table id="tableSellers" class="table table-striped jambo_table bulk_action">
  <thead>
    <tr class="headings">
      <th class="column-title">
        <h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
      <th></th>
      <th class="column-title">
        <h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
      <th class="column-title">
        <h4><i class="fa fa-star feedbackClick"></i></h4></th>
    </tr>
  </thead>
  <tbody class="testWrapper">
    <tr class="test" sale="0" feedback="349">
      <td><a href="http://ebay.com/usr/kansascitykittygirl" target="_blank">kansascitykittygirl</a></td>
      <td>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="kansascitykittygirl" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
      </td>
      <td>
        <b>0</b>
      </td>
      <td><b>349</b></td>

    </tr>
    <tr class="test" sale="10" feedback="14250">
      <td><a href="http://ebay.com/usr/fancaveidaho" target="_blank">fancaveidaho</a></td>
      <td>
        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="fancaveidaho" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
      </td>
      <td><b>10</b></td>
      <td><b>14250</b></td>
    </tr>
  </tbody>
</table>

Answer 1

问题是 a.feedback 和 b.feedback 未获取 feedback 属性的值。您可以使用 $(a).attr('feedback') 和 $(b).attr('feedback') 代替，如下所示。

$(".feedbackClick").click(function() {
    var $wrapper = $('.testWrapper');

    $wrapper.find('.test').sort(function(a, b) {
        return +$(b).attr('feedback') - +$(a).attr('feedback');
    }).appendTo($wrapper);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
  <thead>
    <tr class="headings">
      <th class="column-title">
        Title
      </th>
    </tr>
  </thead>
  <tbody class="testWrapper">
    <tr class="test" feedback="1">
      <td>1111</td>
    </tr>
    <tr class="test" feedback="3">
      <td>3333</td>
    </tr>
    <tr class="test" feedback="2">
      <td>2222</td>
    </tr>
  </tbody>
</table>

<button class="feedbackClick">Sort</button>