dataTables.js没有正确resize。 表仍然溢出窗口

我正在使用来自https://datatables.net/的 dataTables.js我也在使用他们的响应式扩展 ,但我无法让表格正确响应resize。 任何见解都会很棒。

桌子溢出窗户。

如果将它完全展开以显示所有列,它甚至不会开始隐藏列,直到第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(''); }); // 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(); }); }); }); 
      
Name: Type: Manufacturer Supplier Quantity Serial Number Location: Comments Computer Name Room Number Active Tech Fee Specifications Deploy Date User Department Building Tickets
Doom DOOM! Laptop HP none 33 sdfg sdfg dfhgdfh Nebulus 2345 True True Stuff from space 5/30/2015 Michaels | Joey Staff
No tickets found
Dr. Von Doom Laptop HP none 0 123412341234 Dr. Doom's Lair Spiderman 42 True Spidey sense is tingling. ^_^ 6/18/2015 Michaels | Joey Staff AIC Faculty
No tickets found
Name: Type: Manufacturer Supplier Quantity Serial Number Location: Comments Computer Name Room Number Active Tech Fee Specifications Deploy Date User Department Building Tickets

我有同样的问题,我正在使用jquery DataTables 1.10.7和扩展响应1.0.6,我通过在_resize函数中的“dataTables.responsive.js”中添加一行来解决,关于第560行。

添加函数末尾的下一行:

$(dt.table()节点())removeAttr( ‘风格’)。

这应该工作。

function最像这样:

 _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'); },