부트 스트랩 테이블에 숨겨진 열과 행이 표시되어 있습니다.

Question

부트 스트랩 3으로 만든 테이블이 있습니다. 두 개의 행이 있습니다. 하나는 4 개의 td가 있고, 그 중 첫 번째 행은 숨겨진 다음 행을 표시하는 데 사용됩니다 기본적으로. (이전 행에 대한 데이터를 보여줍니다)

이 모든 것이 정상적으로 작동합니다. 그러나 부트 스트랩 "정렬"기능 (헤더 행을 클릭하여)이 예상대로 작동하지 않습니다. 그것은 모든 행을 정렬하고, 숨겨진 것들을 포함하며, 시스템은 더 이상 작동하지 않습니다 ... (내 메인 행을 클릭하면, 다음 행은 숨겨진 것이 아닙니다.) :

사람이 어떻게이 문제를 해결할 수있는 방법에 대한 아이디어가

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"); 
    } 
    }); 
}); 

난 정말 "종류"기능 무슨 일이 일어나고 있는지 모른다 부츠 스트랩에서. 아마도 해결책은 부트 스트랩 정렬 시스템을 사용하지 않도록 설정하고 광산을 구현하는 것일 수 있습니다.

나는 누군가가 이미이 문제가 있었는지 궁금해하고 이것에 알맞은 해결책을 찾았습니다.

Answer 1

을위한 jQuery 플러그인이이

당신은 테이블 헤더

해보십시오 JQuery와 시일을 추정 할 플러그인에 따라 표를 정렬 할 수 있습니다 http://www.datatables.net/manual/styling/bootstrap

Answer 2

나는 당신이이에 적용 할 수있는 당신을 위해 몇 가지 SCS들이 정렬 버튼이 나타납니다. 그런 다음 jquery로 정렬 메커니즘을 구현하면됩니다.

table { 
    thead, 
    tfoot { 
     tr { 
     th { 
      position: relative; 
     } 
     th.sorting { 
      padding-right: 1.5em; 
      cursor: pointer; 
     } 
     th.sorting.asc::before { 
      opacity: 1; 
     } 
     th.sorting.desc::after { 
      opacity: 1; 
     } 
     th.sorting::before, 
     th.sorting::after { 
      position: absolute; 
      bottom: -2px; 
      display: block; 
      opacity: 0.4; 
      padding-bottom: inherit; 
      font-size: inherit; 
      line-height: 180%; 
     } 

     th.sorting::before { 
      right: 0.75em; 
      content: '\2191'; 
     } 
     th.sorting::after { 
      right: 0.25em; 
      content: '\2193'; 
     } 
     } 
    } 
    } 

정렬을 표시하려면 .sorting을 태그에 추가하십시오. .asc 및 .desc 클래스를 사용하여 정렬 방향을 표시합니다.