dataTables.js沒有正確調整大小。表溢出窗口仍然

Question

我使用dataTables.js從https://datatables.net/我也使用他們的responsive extension，但我無法得到正確響應調整大小的表。任何見解都將是偉大的。

該表溢出窗口。

如果你展開它使所有的列中顯示的所有出路，它甚至不啓動中隱藏列直到第3列是關閉屏幕

我已經創建了我的代碼jsfiddle。

$(document).ready(function() { 
 
    // Setup - add a text input to each footer cell 
 
    $('#Table_Assets tfoot th').each(function() { 
 
    var title = $('#Table_Assets thead th').eq($(this).index()).text(); 
 
    $(this).html('<input type="text" style="max-width:80px;" />'); 
 
    }); 
 

 
    // DataTable 
 
    var table = $('#Table_Assets').DataTable({ 
 
    responsive: true, 
 
    "autoWidth": false, 
 
    "order": [ 
 
     [13, "desc"] 
 
    ], 
 
    initComplete: function() { 
 
     var r = $('#Table_Assets tfoot tr'); 
 
     r.find('th').each(function() { 
 
     $(this).css('padding', 8); 
 
     }); 
 
     $('#Table_Assets thead').append(r); 
 
     $('#search_0').css('text-align', 'center'); 
 
    }, 
 
    }); 
 

 
    $('#Table_Assets').resize() 
 

 
    // Apply the search 
 
    table.columns().every(function() { 
 
    var that = this; 
 

 
    $('input', this.footer()).on('keyup change', function() { 
 
     that.search(this.value) 
 
     .draw(); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js" type="text/javascript"></script> 
 
<link href="https://cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css" rel="stylesheet"> 
 
<script src="https://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js" type="text/javascript"></script> 
 

 
<div style="max-width:100%; margin-left:auto; margin-right:auto; background-color:#c4bcbc; border-radius:15px; padding:10px; color:black" class="center"> 
 
    <table id="Table_Assets" class="outerroundedborder dt-responsive" style="width:auto; margin-bottom: 15px; margin-left:auto; margin-right:auto"> 
 
    <thead> 
 
     <tr style="white-space:nowrap;"> 
 
     <th scope="col">Name:</th> 
 
     <th scope="col">Type:</th> 
 
     <th scope="col">Manufacturer</th> 
 
     <th scope="col">Supplier</th> 
 
     <th scope="col">Quantity</th> 
 
     <th scope="col">Serial Number</th> 
 
     <th scope="col">Location:</th> 
 
     <th scope="col">Comments</th> 
 
     <th scope="col">Computer Name</th> 
 
     <th scope="col">Room Number</th> 
 
     <th scope="col">Active</th> 
 
     <th scope="col">Tech Fee</th> 
 
     <th scope="col">Specifications</th> 
 
     <th scope="col">Deploy Date</th> 
 
     <th scope="col">User</th> 
 
     <th scope="col">Department</th> 
 
     <th scope="col">Building</th> 
 
     <th scope="col">Tickets</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td style="width:auto;">Doom DOOM!</td> 
 
     <td>Laptop</td> 
 
     <td>HP</td> 
 
     <td>none</td> 
 
     <td>33</td> 
 
     <td>sdfg</td> 
 
     <td>sdfg</td> 
 
     <td>dfhgdfh</td> 
 
     <td>Nebulus</td> 
 
     <td>2345</td> 
 
     <td>True</td> 
 
     <td>True</td> 
 
     <td>Stuff from space</td> 
 
     <td>5/30/2015</td> 
 
     <td>Michaels | Joey</td> 
 
     <td>Staff</td> 
 
     <td></td> 
 
     <td> 
 
      <br /> 
 
      <div class="grey">No tickets found</div> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td style="width:auto;">Dr. Von Doom</td> 
 
     <td>Laptop</td> 
 
     <td>HP</td> 
 
     <td>none</td> 
 
     <td>0</td> 
 
     <td>123412341234</td> 
 
     <td>Dr. Doom&#39;s Lair</td> 
 
     <td></td> 
 
     <td>Spiderman</td> 
 
     <td>42</td> 
 
     <td>True</td> 
 
     <td></td> 
 
     <td>Spidey sense is tingling. ^_^</td> 
 
     <td>6/18/2015</td> 
 
     <td>Michaels | Joey</td> 
 
     <td>Staff</td> 
 
     <td>AIC Faculty</td> 
 
     <td> 
 
      <br /> 
 
      <div class="grey">No tickets found</div> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    <tfoot> 
 
     <tr class="sortbottom"> 
 
     <th scope="col">Name:</th> 
 
     <th scope="col">Type:</th> 
 
     <th scope="col">Manufacturer</th> 
 
     <th scope="col">Supplier</th> 
 
     <th scope="col">Quantity</th> 
 
     <th scope="col">Serial Number</th> 
 
     <th scope="col">Location:</th> 
 
     <th scope="col">Comments</th> 
 
     <th scope="col">Computer Name</th> 
 
     <th scope="col">Room Number</th> 
 
     <th scope="col">Active</th> 
 
     <th scope="col">Tech Fee</th> 
 
     <th scope="col">Specifications</th> 
 
     <th scope="col">Deploy Date</th> 
 
     <th scope="col">User</th> 
 
     <th scope="col">Department</th> 
 
     <th scope="col">Building</th> 
 
     <th scope="col">Tickets</th> 
 
     </tr> 
 
    </tfoot> 
 
    </table> 
 
</div>

Answer 1

我有同樣的問題，我使用jQuery數據表1.10.7和擴展響應1.0.6，我加入的「dataTables.responsive行解決。 JS」的_resize功能，大約560線

添加下一行的函數的末尾：

$（dt.table（）節點（））removeAttr（ '風格' ）;

這應該工作。

功能最像這樣：

_resize: function() { 
 
    var dt = this.s.dt; 
 
    var width = $(window).width(); 
 
    var breakpoints = this.c.breakpoints; 
 
    var breakpoint = breakpoints[0].name; 
 
    var columns = this.s.columns; 
 
    var i, ien; 
 

 
    // Determine what breakpoint we are currently at 
 
    for (i = breakpoints.length - 1; i >= 0; i--) { 
 
    if (width <= breakpoints[i].width) { 
 
     breakpoint = breakpoints[i].name; 
 
     break; 
 
    } 
 
    } 
 

 
    // Show the columns for that break point 
 
    var columnsVis = this._columnsVisiblity(breakpoint); 
 

 
    // Set the class before the column visibility is changed so event 
 
    // listeners know what the state is. Need to determine if there are 
 
    // any columns that are not visible but can be shown 
 
    var collapsedClass = false; 
 
    for (i = 0, ien = columns.length; i < ien; i++) { 
 
    if (columnsVis[i] === false && !columns[i].never) { 
 
     collapsedClass = true; 
 
     break; 
 
    } 
 
    } 
 

 
    $(dt.table().node()).toggleClass('collapsed', collapsedClass); 
 

 
    dt.columns().eq(0).each(function(colIdx, i) { 
 
    dt.column(colIdx).visible(columnsVis[i]); 
 
    }); 
 

 
    $(dt.table().node()).removeAttr('style'); 
 
},

最好的問候。