响应式Bootstrap数据表不会在正确的位置折叠列
nog*_*ade 34 jquery datatables responsive-design twitter-bootstrap
我正在使用Datatables.net最新版本,带有数据表和引导程序.我想我的问题是:Datatables Responsive Bootstrap用于检测溢出,因为它显然不是父宽度.
这是我的结果:
这是一个非常直接的问题.如果我减少窗口的宽度1个像素,列最终会崩溃.如果我然后展开它,它将返回到此状态.我想防止父引导程序面板溢出.我已经删除了bootstrap网格div(row/col-xs-12等)来消除potitial问题,但是一旦解决了这个问题(或者我更好地理解了这个问题),我打算也使用bootstrap网格系统.
这是一个完美复制问题的plunkr(折叠运行视图):http://plnkr.co/edit/tZxAMOHmdoHNHrzhP5tR？p = preview
<!DOCTYPE html>
<html>
<head>
<title>Tables - PixelAdmin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css"/>
<link rel="stylesheet" href="http://cdn.datatables.net/responsive/1.0.2/css/dataTables.responsive.css"/>
<style>
body {
font-size: 140%;
}
table.dataTable th,
table.dataTable td {
white-space: nowrap;
}
</style>
</head>
<body style="padding-top: 40px;">
<div class="panel panel-primary" style="margin: 51px; padding: 0;">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body" style="padding: 0;">
<div style="width: 100%; border: 1px solid red;">
<table id="example" class="table table-striped table-hover dt-responsive" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/responsive/1.0.2/js/dataTables.responsive.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#example')
.dataTable({
"responsive": true,
"ajax": 'data.json'
});
});
</script>
</body>
</html>
coD*_*rer 46
在表格开始之前添加带有"table-responsive"类的Div,并从表格标签中删除width ="100%",
<div class="panel panel-primary" style="margin: 50px;">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<div style="width: 100%; padding-left: -10px; border: 1px solid red;">
<div class="table-responsive"> <-- add this div
<table id="example" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0"> <-- remove width from this
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
The*_*bee 13
我知道这篇文章很老,对于任何试图完成这项工作的人来说都是这样做的
<table id="example" class="display" cellspacing="0" width="100%"></table>
添加宽度="100%"它应该采取它并使其响应没有任何配置
看看小提琴工作
对我来说,当我将表容器div放在bootstrap行div中时,问题得到解决.
<div class="row">
<div class="table-responsive">
... //table here
</div>
</div>
原因是datatables bootstrap版本正在向工具栏添加一些col-*(在我的情况下),这些col-*作为另一个父级col-下的直接子项而下降.该同事理想的应该是行,而不是山坳里的孩子(据我所知).
您需要包含响应式 css 和 js
https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.css
https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.js
<table class="table table-striped table-bordered dataTable display" cellspacing="0" width="100%">
</table>
这对我有用。始终记住一件事，您必须包含 jquery 和数据表 css 和 js。
$('.dataTable').dataTable({
"responsive": true,
});
我知道这篇文章很旧，但如果有人遇到这个问题，请尝试以下操作：
更新数据表的内容后，使用以下代码（dt_table 是我的响应式数据表的实例）：
dt_table.draw();
dt_table.columns.adjust().responsive.recalc();
更多信息： https: //datatables.net/reference/api/responsive.recalc()
| 归档时间： |
|
| 查看次数： |
75537 次 |
| 最近记录： |