建立一个复杂表的排序器和过滤器

Question

当前，我正在构建一个包含大量数据的复杂表，该表与示例示例有点相似。我想使用具有弹出样式（如图像）的jquery添加排序器和过滤器功能 谁能为此提供解决方案？

./manage.py test utils.tests.test_helpers

./manage.py test

我已经添加了到目前为止完成的杂项工作，似乎无法对每个cols起作用。对于选择部分，我不知道如何像文本部分那样实现

Answer 1

如果您愿意的话，请您为这位厨师做装饰

jsfiddle

$(document).ready(function() {
  $(".myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  height:0px;
  min-width: 160px;

  padding: 3px;
  z-index: 1;
  transition:0.3s;
  overflow:hidden;
}

.dropdown:hover .dropdown-content {
  height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>
        <div class="dropdown">
          <span>Firstname</span>
          <div class="dropdown-content">
            <p> <input type="text" placeholder="Search for names.." class="myInput"></p>
          </div>
        </div>
      </th>
      <th>
            <div class="dropdown">
  <span>Email</span>
  <div class="dropdown-content">
    <p> <input type="text" placeholder="Search for names.." class="myInput"></p>
  </div>
</div>
      </th>
      <th>
            <div class="dropdown">
  <span>Email</span>
  <div class="dropdown-content">
    <p> <input type="text" placeholder="Search for names.." class="myInput"></p>
  </div>
</div>
      </th>
      <th>
                  <div class="dropdown">
  <span>Email</span>
  <div class="dropdown-content">
    <p>  <select>
          <option></option>
          <option>x</option>
          <option>N/A</option>
        </select></p>
  </div>
</div>
        decide
      </th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
      <td>x</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@mail.com</td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@greatstuff.com</td>
      <td>x</td>
    </tr>
    <tr>
      <td>Anja</td>
      <td>Ravendale</td>
      <td>a_r@test.com</td>
      <td></td>
    </tr>
  </tbody>
</table>