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数据表溢出

回答

相关问题