javascript - 对 Bootstrap 表中的可见行和相关隐藏行进行排序

Question

我有一张 table ，是用 bootstrap 3 制作的。 我有 2 种行，一种有 4 个 td，我使用它们中的第一个来显示默认情况下隐藏的下一行。 (显示有关前一行的数据)

一切正常。但是，Bootstrap“排序”功能(通过单击标题行)无法按预期工作。它对所有行进行排序，包括隐藏的行，我的系统不再工作了......(当我点击我的主行时，下一行不是隐藏的行...... :( )

有人知道我该如何解决这个问题吗？

HTML:

<table class="table table-striped">
  <thead>
    <th>show data</th>
    <th>name</th>
    <th>adress</th>
    <th>buttons</th>
  </thead>
  <tbody>
    <tr class="mainRow">
      <td class="clickArrow"></td>
      <td>my name</td>
      <td>my adress</td>
      <td>some buttons</td>
    </tr>
    <tr class="subRow">
      <td colspan=4>THE DATA !!!!</td>
    </tr>
  </tbody>
</table>

JS:

$(document).ready(function(){
  $('.subRow').hide();
  $('body').find('.clickArrow').html('<i class="fa fa-arrow-down"></i>');
  $('body').on('click','.clickArrow',function(){
    if($(this).html()=='<i class="fa fa-arrow-down"></i>'){
      $(".clickArrow").html('<i class="fa fa-arrow-down"></i>');
      $('.subRow').hide();
      $('.mainRow td').css('background-color','#DDDACE');
      $(this).parent('tr').find('td').css('background-color','white');
      $(this).html('<i class="fa fa-eye"></i>');
      $(this).parent('tr').next().slideToggle("slow");
    }else{
      $(this).html('<i class="fa fa-arrow-down"></i>');
      $(this).parent('tr').find('td').css('background-color','#DDDACE');
      $(this).parent('tr').next().slideToggle("slow");
    }
  });
});

我不知道 Bootstrap 的“排序”功能到底发生了什么。 也许解决方案是禁用 Bootstrap 排序系统，并实现我的。

我只是想知道是否有人已经遇到过这个问题并找到了一个不错的解决方案。

Answer 1

这个有jquery插件

您可以根据表格标题对表格进行排序

试试 jquery 数据表插件 http://www.datatables.net/manual/styling/bootstrap