2017-04-07 1 views
3

responsive과 함께 DataTables을 사용 중이고 특정 열만 표시하려고 할 때 문제가 있습니다.DataTable 응답 디스플레이 일부 열

테이블 레이아웃은 다음과 같이이다 : 내가 다른 사람 만 'Column 1', 'Column3', 'Column 7', 'Column 8', 'Column 10'에 표시하고 숨길 필요가 enter image description here

가 (이 각 행의 끝에서 컨트롤을 확장하여 표시되어야합니다).

JS :

$('table').DataTable({ 
     order: [ [ 0, "asc" ] ], 
     responsive: { 
      details: { 
       type: 'column', 
       target: 'tr' 
      } 
     }, 
     columnDefs: [ { 
      className: 'control', 
      orderable: false, 
      targets: -1 
     } ] 
    }); 

이이 JSFiddle이다. 어떤 제안이라도! 당신이 필요 같은

답변

6

응답 데이터 테이블의 특정 컬럼을, 당신은 단지 다음과 같이 테이블의 thClass Controls을 추가해야 표시하려면 :

<table class="table table-hover table-striped"> 
    <thead> 
    <tr> 
     <th class="all">Column 1</th> 
     <th class="none">Column 2</th> 
     <th class="all">Column 3</th> 
     <th class="none">Column 4</th> 
     <th class="none">Column 5</th> 
     <th class="none">Column 6</th> 
     <th class="all">Column 7</th> 
     <th class="all">Column 8</th> 
     <th class="none">Column 9</th> 
     <th class="all">Column 10</th> 
     <th class="none">Column 11</th> 
     <th class="all"></th> 
    </tr> 
    </thead> 

클래스 "모든" 항상 표시 란 화면 크기에 관계없이

클래스 "none": 열로 표시하지 않고 하위 행에 표시합니다.

Here은 실무 데모입니다.

희망이 있습니다.

+0

감사합니다. – Beginner

+0

이 작품! 감사 !! – Shalika