데이터 테이블 온더 플라이 크기 조정

데이터 테이블 온더 플라이 크기 조정

---

저는 놀라운 DataTables jQuery 플러그인을 사용하고 있습니다. http://datatables.net/ FixedColumns 및 KeyTable 엑스트라를 추가했습니다.

이제 창 크기가 변경되면 테이블 크기가 예쁘게 조정됩니다. 그러나 테이블의 포함 div는 jQuery 애니메이션으로 너비의 크기를 조정할 수도 있으며 테이블 크기를 조정하는 방법을 찾지 못했습니다. 원래 너비에서 정체되어 있습니다. 페이지로드 전에 코드에서 div 너비를 변경하는 경우에만 테이블 크기가 올바르게 조정됩니다.

창 너비와 포함 div 너비에 따라 DataTable의 크기를 즉석에서 조정하려면 어떻게해야합니까? 미리 감사드립니다! :-)

---

무슨 일이 일어나고 있는지는 DataTables가 테이블이 계산 된 값으로 초기화 될 때 테이블의 CSS 너비를 설정한다는 것입니다.이 값은 픽셀 단위이므로 드래그로 크기가 조정되지 않습니다. 이렇게하는 이유는 페이지 매김을 변경할 때 테이블과 열 (열 너비도 설정 됨)이 너비에서 점프하는 것을 중지하기 위해서입니다.

DataTables에서이 동작을 중지하기 위해 수행 할 수있는 작업은 autoWidth 매개 변수를 false로 설정하는 것 입니다.

$('#example').dataTable( {
  "autoWidth": false
} );

그러면 DataTables가 계산 된 너비를 테이블에 추가하지 않고 (아마도) width : 100 % 만 남겨두고 크기를 조정할 수 있습니다. 열에 상대적인 너비를 추가하면 열이 튀는 것을 막을 수 있습니다.

DataTables에 내장 된 또 다른 옵션은 sScrollX 옵션을 설정하여 스크롤을 활성화하는 것입니다. DataTables는 테이블을 스크롤 컨테이너의 100 % 너비로 설정하기 때문입니다. 그러나 스크롤을 원하지 않을 수도 있습니다.

완벽한 해결책은 테이블의 CSS 너비 (즉, 100 %가 적용된다고 가정)를 얻을 수 있지만 스타일 시트를 구문 분석하지 않고는 그 방법을 볼 수없는 경우입니다 (즉 기본적으로 $ () .css ( 'width')를 사용하여 픽셀 계산 값이 아닌 스타일 시트에서 값을 반환합니다.

---

나는 이것이 오래되었다는 것을 알고 있지만 다음과 같이 해결했습니다.

  var update_size = function() {
    $(oTable).css({ width: $(oTable).parent().width() });
    oTable.fnAdjustColumnSizing();  
  }

  $(window).resize(function() {
    clearTimeout(window.refresh_size);
    window.refresh_size = setTimeout(function() { update_size(); }, 250);
  });

참고 :이 답변은 DataTables 1.9에 적용됩니다.

---

이것은 나를 위해 트릭을했습니다.

$('#dataTable').resize()

---

$(document).ready(function() {
    $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
        // var target = $(e.target).attr("href"); // activated tab
        // alert (target);
        $($.fn.dataTable.tables( true ) ).css('width', '100%');
        $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
    } ); 
});

그것은 나를 위해 작동합니다. "autoWidth": false,

---

당신은 이것을 시도해야합니다.

var table = $('#example').DataTable();
table.columns.adjust().draw();

링크 : 데이터 테이블에서 열 조정

---

"bAutoWidth": false아래 주어진 예를 사용 하고 살펴보십시오. 그것은 나를 위해 일하고 있습니다.

예:

$('#tableId').dataTable({
 "bAutoWidth": false
});

---

다른 답변처럼 늦을 수도 있지만 올해 초에 이것을했고 제가 생각해 낸 해결책은 CSS를 사용하는 것입니다.

    $(window).bind('resize', function () {
        /*the line below was causing the page to keep loading.
        $('#tableData').dataTable().fnAdjustColumnSizing();
        Below is a workaround. The above should automatically work.*/
        $('#tableData').css('width', '100%');
    } );

---

div 크기 조정 이벤트를 캡처 .fnDraw()하고 데이터 테이블에서 수행해 보셨습니까 ? fnDraw테이블 크기를 조정해야합니다.

---

다음과 같이 작동하도록했습니다.

먼저 dataTable정의 에서 aoColumns배열에 sWidth고정 픽셀 또는 ems가 아닌 %로 표현 된 데이터가 포함되어 있는지 확인하십시오 . 그런 다음 bAutoWidth속성을 false다음으로 설정했는지 확인하십시오 .

update_table_size = function(a_datatable) {
  if (a_datatable == null) return;
  var dtb;
  if (typeof a_datatable === 'string') dtb = $(a_datatable)
  else dtb = a_datatable;
  if (dtb == null) return;

  dtb.css('width', dtb.parent().width());
  dtb.fnAdjustColumSizing();
}

$(window).resize(function() {
  setTimeout(function(){update_table_size(some_table_selector_or_table_ref)}, 250);
});

대우를 작동하고 내 테이블 셀은 white-space: wrap;CSS를 처리합니다 (을 설정하지 않고는 작동하지 않았 으며이 sWidth질문으로 이어졌습니다.)

---

I was having the exact same problem as OP. I had a DataTable which would not readjust its width after a jQuery animation (toogle("fast")) resized its container.

After reading these answers, and lots of try and error this did the trick for me:

  $("#animatedElement").toggle(100, function() {    
    $("#dataTableId").resize();
  });

After many test, i realized that i need to wait for the animation to finish for dataTables to calculate the correct width.

---

I had the same challenge. When I collapsed some menus I had on the left of my web app, the datatable would not resize. Adding "autoWidth": false duirng initialization worked for me.

$('#dataTable').DataTable({'autoWidth':false, ...});

---

The code below is the combination of Chintan Panchal's answer along with Antoine Leclair's comment (placing the code in the windows resize event). (I didn't need the debounce mentioned by Antoine Leclair, however that could be a best practice.)

  $(window).resize( function() {
      $("#example").DataTable().columns.adjust().draw();
  });

This was the approach that worked in my case.

ReferenceURL : https://stackoverflow.com/questions/8278981/datatables-on-the-fly-resizing