JQuery數據表溢出

我已經在選項卡式容器中解決了我的數據集，如果表太長，它會溢出。下面的代碼重新調整列當我改變標籤：JQuery數據表溢出

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

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

，但有點費力的處理時間，當您更改標籤這個當前的代碼纔有效。表溢出，當任何操作上調用它，這是排序，添加行，或過濾等

下面有溢出的屏幕截圖，可以在右側看到的，由箭頭（正如指出削除與白盒的數據，所以不要對那些擔心）：

data tables overflows right-side

如果有必要，繼承人我的代碼來創建數據表休息（我也是用可編輯插件）：

$('.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。：/

來源

2011-10-05 FinalFortune

添加"sScrollX": "100%"

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

來源

2011-10-05 00:34:49 rlemon

這工作，但似乎從調整停止列，有沒有辦法讓兩者兼而有之？（我只是想調整列的大小來填充表格的寬度）。另一個問題在firefox v7.0上可以正常工作，但是我的一些表格上有一個谷歌瀏覽器，表格中出現一個空白塊。 – FinalFortune

閱讀[這裏]（http://www.datatables.net/usage/columns） – rlemon

JQuery數據表溢出

回答

相關問題