如何首先对两个表进行排序

Question

我正在寻找可以将第二个表与第一个表排序相同的解决方案。例如，我想对名称（第一个表）进行排序，然后在第二个表中更改位置，就像在第一个表中一样。

例如，我会给你链接到我的小提琴：

$(document).ready(function() {
  var $tableLeft = $('.table-left'),
    $tableRight = $('.table-right'),
    $sortButton = $('.sort');

  $sortButton.on('click', function() {
    // I don't know what i have to do...
  });
});

.flex-table {
  display: flex;
}

.flex-table>div:first-child {
  width: 80px;
}

.table-left {
  margin-right: 5px;
}

.table-left>table td,
.table-left>table th {
  background-color: #ddd;
}

table td {
  height: 20px;
}

td,
th {
  border: 1px solid #aaa;
  padding: 2px 10px;
}

table {
  border-spacing: 0;
}

thead {
  height: 50px;
}

.sort {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex-table">
  <div class="table-left">
    <table>
      <thead>
        <tr>
          <th rowspan="2" class="sort"><b>Name</b></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Thomas</td>
        </tr>
        <tr>
          <td>Mathew</td>
        </tr>
        <tr>
          <td>Andreas</td>
        </tr>
        <tr>
          <td>Kowalski</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="table-right">
    <table>
      <thead>
        <tr>
          <th colspan="2">Testing new</th>
          <th rowspan="2">Testing old</th>
          <th rowspan="2">Testing nothing</th>
        </tr>
        <tr>
          <th>Version</th>
          <th>Year</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>0.7</td>
          <td>2017</td>
          <td>Yes</td>
          <td>No</td>
        </tr>
        <tr>
          <td>0.5</td>
          <td>2015</td>
          <td>No</td>
          <td>No</td>
        </tr>
        <tr>
          <td>0.8</td>
          <td>2018</td>
          <td>Yes</td>
          <td>Yes</td>
        </tr>
        <tr>
          <td>0.6</td>
          <td>2016</td>
          <td>No</td>
          <td>Yes</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

JSfiddle

我认为应该对索引进行一些处理，但我不确定。很高兴能找到一些帮助。

Answer 1

如果您需要简短的解决方案，请使用具有最简单配置的 Datatables jQuery 插件。

见：https://datatables.net/examples/basic_init/zero_configuration.html