JQuery Datatables 오버플로

Question

테이블이 너무 길면 오버플로가 발생합니다. 다음 코드는 내가 탭을 변경할 때 열 크기를 조정 :

$('#tmTabs').tabs({ 
    "show": function(event, ui) { 

     var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable(); 
     if (oTable.length > 0) { 
      oTable.fnAdjustColumnSizing(); 
     } 
    } 
}); 

을하지만, 조금 처리 시간에 과세하고 탭을 변경할 때 현재 코드에만 작동합니다. 테이블을 오버플로하면 어떤 작업이 호출 될 때 정렬, 행 추가 또는 필터링 등이 수행됩니다.

Heres 오버플로의 스크린 샷으로 화살표가 가리키는 것처럼 볼 수 있습니다 흰색 상자와 데이터를 지워졌습니다, 그래서 그 걱정을) 해달라고 :

만약 dataTables를 작성하려면 코드의 필요를 heres 나머지 (나는 또한 편집 가능한 플러그인을 사용하고 있습니다) :

$('.dataTable').each(function(){ 
    //get ID of current table; 
    tblID = $(this).attr("id"); 
    var pattern = "[0-9]+"; 
    $tblIDNum = tblID.match(pattern); 

    //transform this table into a data table 
    $(this).dataTable({ 
     "sScrollY": "600px", 
     "bScrollCollapse": true, 
     "bPaginate": false, 
     "bJQueryUI": true, 
     "aoColumnDefs": [ 
      { "sWidth": "10%", "aTargets": [ -1 ] } 
      ] 
     }) 

    .makeEditable({ 
      //ajax requests for server-side processing 
      sUpdateURL: "UpdateData.php", 
      sAddURL: "AddData.php", 
      sDeleteURL: "DeleteData.php", 

      //Button Customization 
      oAddNewRowButtonOptions: { 
      label: "Add...", 
          icons: { primary: 'ui-icon-plus' } 
         }, 
         oDeleteRowButtonOptions: { 
      label: "Remove", 
          icons: { primary: 'ui-icon-trash' } 
         }, 
         oAddNewRowOkButtonOptions: { 
      label: "Confirm", 
          icons: { primary: 'ui-icon-check' }, 
          name: "action", 
          value: "add-new" 
         }, 
         oAddNewRowCancelButtonOptions: { 
      label: "Close", 
          class: "back-class", 
          name: "action", 
          value: "cancel-add", 
          icons: { primary: 'ui-icon-close' } 
         }, 
      oAddNewRowFormOptions: { 
       title: 'Add New Row', 
       show: "blind", 
       hide: "explode" 
       }, 

      //Link button ids 
      sAddDeleteToolbarSelector: ".dataTables_length", 
      sAddNewRowFormId: "formAddNewRow"+$tblIDNum, 
      sAddNewRowButtonId: "btnAddNewRow"+$tblIDNum, 
      sAddNewRowOkButtonId: "btnAddNewRowOk"+$tblIDNum, 
      sAddNewRowCancelButtonId: "btnAddNewRowCancel"+$tblIDNum, 
      sDeleteRowButtonId: "btnDeleteRow"+$tblIDNum         
      }); 

}); 

해결책은? 나는 모든 Javascript가 아니더라도 CSS 오버 플로우 속성을 변경 만하면 어려울 것이라고 생각하지 않습니다. Datatables를 사용하여 후회하게 만듭니다. :/

Answer 1

이 작동하지만, 크기 조정에서 열을 중지하는 것 "sScrollX": "100%"

$(this).dataTable({ 
     "sScrollX": "100%", 
     "sScrollY": "600px", 
     "bScrollCollapse": true, 
     "bPaginate": false, 
     "bJQueryUI": true, 
     "aoColumnDefs": [ 
      { "sWidth": "10%", "aTargets": [ -1 ] } 
      ] 
     })