jQuery / Javascript - 基于Totals Row排序表列

Question

如何根据最后一个总计行的排序对表列执行排序？

例如，使用下表结构标题为＆＃34; Total Sold％＆＃34;将用于将值中的相应列从高到低排序。因此，列将向左或向右移动，以便＆＃34; Total Sold％＆＃34;行排序 12.42％，12.64％，14.73％：

<table class="table table-bordered text-center">
  <thead>
    <tr>
      <th class="text-center">
        Average
      </th>
      <th class="text-center">
        Entry #1
      </th>
      <th class="text-center">
        Entry #2
      </th>
      <th class="text-center">
        Entry #3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        New Car Total Leads
      </th>
      <td>
        251
      </td>
      <td>
        227
      </td>
      <td>
        526
      </td>
    <tr>
      <th scope="row">
        Appointments Shown %
      </th>
      <td>
        61%
      </td>
      <td>
        61%
      </td>
      <td>
        61%
      </td>
    </tr>
    <tr>
      <th scope="row">
        Sold (Delivered)
      </th>
      <td>
        28
      </td>
      <td>
        37
      </td>
      <td>
        85
      </td>
    </tr>
    <tr>
      <th scope="row">
        Total Sold %
      </th>
      <td>
        12.64%
      </td>
      <td>
        12.42%
      </td>
      <td>
        14.73%
      </td>
    </tr>
  </tbody>
</table>

Answer 1

嗯，你可以这样做：

1. 找到包含要对其数据单元格进行排序和排序的数据的行 R 。将这些已排序的单元格存储在 S
中
2. 在 r 的每一行上，按照 S 对每个数据单元 c 进行排序
   1. 在 r 中查找 c 的索引。这是 i
   2. 在 R [ i ]
   中找到 C 单元格
   3. 在 S 中获取 C 的位置。这是我们在数组中的目标索引，用它排序
3. 按顺序将每个单元格附加到该行。它将替换正确位置的所有单元格

此代码已损坏，请参阅下文

$('#sort').click(sort);

function sort() {
  var $table = $('table'),
    $sorted = $table.find('tbody tr').last().children().slice(1).sort(function(a, b) {
      return parseFloat(a.textContent) - parseFloat(b.textContent)
    });
  $table.find('tr').each(function() {
    var $row = $(this);
    $row.children().slice(1).sort(function(a, b) {
      return $sorted.eq($(a).index() - 1).index() - $sorted.eq($(b).index() - 1).index();
    }).each(function() {
      $row.append(this);
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sort">
  Sort
</button>
<table class="table table-bordered text-center">
  <thead>
    <tr>
      <th class="text-center">
        Average
      </th>
      <th class="text-center">
        Entry #1
      </th>
      <th class="text-center">
        Entry #2
      </th>
      <th class="text-center">
        Entry #3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        New Car Total Leads
      </th>
      <td>
        251
      </td>
      <td>
        227
      </td>
      <td>
        526
      </td>
      <tr>
        <th scope="row">
          Appointments Shown %
        </th>
        <td>
          61%
        </td>
        <td>
          61%
        </td>
        <td>
          61%
        </td>
      </tr>
      <tr>
        <th scope="row">
          Sold (Delivered)
        </th>
        <td>
          28
        </td>
        <td>
          37
        </td>
        <td>
          85
        </td>
      </tr>
      <tr>
        <th scope="row">
          Total Sold %
        </th>
        <td>
          12.64%
        </td>
        <td>
          12.42%
        </td>
        <td>
          14.73%
        </td>
      </tr>
  </tbody>
</table>

当然，这只是所有可能解决方案中的一种，而不是更快的解决方案。否则，您可以尝试在数组（单元格）的数组（行）中解析表，排序，然后重新插入表。它可以避免做很多jQuery调用，而且速度很慢。消耗内存

编辑：上面的代码在大多数情况下都不起作用，因为我省略了JavaScript sort算法假设元素在执行内部函数后移动，所以索引每次迭代都会发生变化。我以前的代码没有这样做，所以它不起作用。

这是固定版本

$('#sort').click(sort);

function sort() {var LEFT_ROWS = 1,
    $table = $('table'),
    $sorted = $table.find('tbody tr').last().children().slice(LEFT_ROWS);
  $sorted = $sorted.sort(function(a, b) {
    return parseFloat(a.textContent) - parseFloat(b.textContent);
  });
  $table.find('tr').each(function() {
    var $row = $(this),
      $rowContent = $row.children().slice(LEFT_ROWS);
    $rowContent.toArray().map(function(t) {
      return $sorted.eq($(t).index() - LEFT_ROWS).index() - LEFT_ROWS
    }).sort(function(a, b) {
      var diff = a - b;
    }).forEach(function(i) {
      $row.append($rowContent.eq(i));
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="sort">
  Sort
</button>
<table class="table table-bordered text-center">
  <thead>
    <tr>
      <th class="text-center">
        Average
      </th>
      <th class="text-center">
        Entry #1
      </th>
      <th class="text-center">
        Entry #2
      </th>
      <th class="text-center">
        Entry #3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        New Car Total Leads
      </th>
      <td>
        251
      </td>
      <td>
        227
      </td>
      <td>
        526
      </td>
      <tr>
        <th scope="row">
          Appointments Shown %
        </th>
        <td>
          61%
        </td>
        <td>
          61%
        </td>
        <td>
          61%
        </td>
      </tr>
      <tr>
        <th scope="row">
          Sold (Delivered)
        </th>
        <td>
          28
        </td>
        <td>
          37
        </td>
        <td>
          85
        </td>
      </tr>
      <tr>
        <th scope="row">
          Total Sold %
        </th>
        <td>
          12.64%
        </td>
        <td>
          12.42%
        </td>
        <td>
          14.73%
        </td>
      </tr>
  </tbody>
</table>