我正在使用https://datatables.net/中的dataTables.js我也使用他们的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'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>
答案 0 :(得分:2)
我有同样的问题,我正在使用jquery DataTables 1.10.7和扩展版Responsive 1.0.6,我通过在 _resize 中的“dataTables.responsive.js”中添加一行来解决强>功能,约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');
},
最好的问候。