데이터 테이블 자체에 열을 숨기기

Question

내 열을 숨기거나 압축 할 수있는 원인은 무엇입니까? 더하기 기호가 행 옆에 놓입니다. 미안 해요 datatables 사이트를 확인하기 위해이 무엇이라고 불렀는지 모르겠다.

이 모달가 표시되면 열 헤더를 해결하기 위해 조정 호출 한 후 발생합니다.

var dtUsers = $('#table-user-results').DataTable({ 
     scrollY: "40vH", 
     scroller: true, 
     responsive: true 
    }); 

    $(document).on('shown.bs.modal', '#list-manage-users-modal', function() { 
     dtUsers.columns.adjust().draw(); 
    }); 

표

<table id="table-user-results" class="table table-striped table-bordered table-hovered dataTable"> 
       <thead class=""> 
        <tr> 
         <th>Name</th> 
         <th>Email</th> 
         <th>Role</th> 
        </tr> 
       </thead> 
       <tbody> 
        @foreach (var user in Model) 
        { 
         <tr id="@user.ID" class="@(!user.Email.Equals(User.Identity.Name, StringComparison.InvariantCultureIgnoreCase) ? "user-results-context" : "")"> 
          <td>@user.LastName, @user.FristName</td> 
          <td>@user.Email</td> 
          <td>@user.RoleName</td> 
         </tr> 
        } 
       </tbody> 
      </table> 

이슈 UPDATE

스크롤이 필요 충분한 데이터가없는 경우에 따라서 문제가 트리거됩니다.

Answer 1

Responsive 확장자를 사용하면보기에 맞지 않을 때 열을 숨 깁니다.

그러나 모달 창에 테이블을 표시하는 경우 테이블이 초기에 숨겨져 있기 때문에 반응 확장에서 열 너비를 잘못 감지 할 수 있습니다.

columns.adjust() 외에도 responsive.recalc() API 방법을 사용하는 것이 해결책입니다.

Scroller 확장 프로그램을 사용 중이므로 scroller.measure() API 메소드를 호출해야합니다.

$(document).on('shown.bs.modal', '#list-manage-users-modal', function(){ 
    $($.fn.dataTable.tables(true)).DataTable() 
     .columns.adjust() 
     .responsive.recalc() 
     .scroller.measure(); 
}); 

또한이 두 확장의 호환성 버그가 보인다 scrollCollapse: true 옵션을 포함해야합니다

아래의 코드를 참조하십시오. 자세한 내용은 issue #854 on GitHub을 참조하십시오.

코드 및 데모는 this example을 참조하십시오.