Question

我有一张桌子，用自举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的“排序”功能到底发生了什么。也许解决方案是禁用引导排序系统，并实现我的。

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

Answer 1

这个

有jquery插件

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

尝试使用jquery datable插件 http://www.datatables.net/manual/styling/bootstrap

Answer 2

我有一些scss给你，你可以申请让排序按钮显示出来。然后你要做的就是用jquery实现排序机制。

gvisTimeline(data=df, 
rowlabel="GroupingVariable1", 
barlabel="Title",
start="start, 
end="end")

将.sorting添加到标记以显示排序。和.asc和.desc类来显示排序的方向

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

2 个答案: