동일한 페이지에서 폭 문제가 발생하는 여러 jquery 데이터 테이블. (Datatables v10.13)

두 테이블 모두에 너비 문제가 발생합니다. 여기동일한 페이지에서 폭 문제가 발생하는 여러 jquery 데이터 테이블. (Datatables v10.13)

<table id="tblMessages" class="table table-striped table-bordered full-width table-advance table-hover table-condensed fl" style="border-collapse:collapse !important;"> 
       <thead> 
        <tr> 
         <th style="cursor:pointer; width:20%">From</th> 
         <th style="cursor:pointer; width:60%">Subject</th> 
         <th style="cursor:pointer; width:20%">Date</th> 
        </tr> 
       </thead> 
       <tbody></tbody> 
      </table>

그리고 두 번째 테이블은, 내가 Datatables하지만 행운의 '열'속성에 폭을주는 시도

<table id="tblToDos" class="table table-striped table-bordered table-advance full_width table-hover table-condensed fl" style="border-collapse:collapse !important"> 
       <thead> 
        <tr> 
         <th style="width:5%"></th> 
         <th style="cursor:pointer; width:20%">From</th> 
         <th style="cursor:pointer; width:30%">Patient</th> 
         <th style="cursor:pointer; width:35%">Subject</th> 
         <th style="cursor:pointer; width:10%">Reminder Date</th> 
        </tr> 
       </thead>

참고 아래의 코드를 참조하십시오.

그리고 두 번째 테이블 초기화를 제거하면 올바르게 작동합니다.

출처

2017-03-06 Kendy

정확히 열 너비의 문제점은 무엇입니까? 문제의 스크린 샷을 표시 할 수 있습니까? 이 표가 처음에 표시됩니까? 테이블이 초기에 숨겨진 경우 (탭, 아코디언 섹션에서) –

두 테이블은 표시되지만 열 너비는 자동 너비로 자동 설정됩니다. – Kendy

초기화 중에 ['autoWidth'] (https://datatables.net/reference/option/autoWidth) 옵션을 비활성화하고 열 너비를 지정하십시오. usint ['columns.width'] (https://datatables.net/reference/ option/columns.width) 옵션을 사용하십시오. –

나는 해결책을 얻었다. 그것은 적절한 해결책은 아니지만 아래 코드를 사용하여 그리드를 다시 그리면이 문제를 해결할 수 있습니다.

$('#tblMessages').DataTable().columns.adjust().draw();

두 번째 datatable 초기화가 완료되면이 행을 삽입하십시오.

출처

2017-03-07 07:20:22 Kendy

동일한 페이지에서 폭 문제가 발생하는 여러 jquery 데이터 테이블. (Datatables v10.13)

답변

관련 문제