jQuery 响应式引导数据表不会在正确的点折叠列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26500010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive Bootstrap Datatable not collapsing columns at the correct point
提问by nograde
I'm using Datatables.net latest, with datatables and bootstrap. I suppose my question is: What does Datatables Responsive Bootstrap use to detect overflow, because it clearly isn't the parent width.
我正在使用最新的 Datatables.net，带有数据表和引导程序。我想我的问题是：Datatables Responsive Bootstrap 使用什么来检测溢出，因为它显然不是父宽度。
Here is my result:
这是我的结果：
It's a pretty straight forward problem. If I reduce the width of my window 1 more pixel the column will finally collapse. If I then expand it, it returns to this state. I would like to prevent overflow from the parent bootstrap panel. I've removed the bootstrap grid divs (row/col-xs-12, etc) to eliminate potitial problems, but once this is resolved (or I better understand the problem) I intend to utilize the bootstrap grid system as well.
这是一个非常直接的问题。如果我将窗口的宽度再减少 1 个像素，该列最终会折叠起来。如果我再展开它，它就会回到这个状态。我想防止从父引导面板溢出。我已经删除了引导网格 div（row/col-xs-12 等）以消除潜在问题，但是一旦解决了这个问题（或者我更好地理解了问题），我也打算使用引导网格系统。
Here is a plunkr that perfectly replicated the problem (collapse the run view): http://plnkr.co/edit/tZxAMOHmdoHNHrzhP5tR?p=preview
这是一个完美复制问题的 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>
回答by coDe murDerer
Add Div with class "table-responsive" before table start and delete width = "100%" from table tag ,
在表格开始之前添加类“table-responsive”的 Div 并从表格标签中删除宽度 =“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>
回答by Theophilus Omoregbee
i know this post is old, for anyone trying to get this done simply do this
我知道这篇文章很旧，对于任何试图完成此操作的人来说，只需执行此操作
<table id="example" class="display" cellspacing="0" width="100%"></table>
add width="100%" it should take it and make it responsive without any configuration of such
添加 width="100%" 它应该接受它并使其响应而无需任何此类配置
check out Fiddle Working
查看小提琴工作
回答by ZedBee
For me the problem got fixed when I put the table container div inside a bootstrap row div.
对我来说，当我将表容器 div 放在引导行 div 中时，问题得到了解决。
<div class="row">
<div class="table-responsive">
... //table here
</div>
</div>
The reason for this was that datatables bootstrap version was adding some col-* to toolbar (in my case) which were falling as direct children under another parent col-. The col-ideally should be children of row rather than col (as far as I understand).
这样做的原因是数据表引导程序版本向工具栏添加了一些 col-*（在我的情况下），这些 col-* 作为另一个父 col- 下的直接子项。col-理想情况下应该是 row 的孩子而不是 col （据我所知）。
回答by Erick Elizondo
I know this post is old, but if someone is having this problem, try the following:
我知道这篇文章很旧，但如果有人遇到这个问题，请尝试以下操作：
After updating the content of the DataTable use this code (dt_table is my instance of a Responsive DataTable):
更新 DataTable 的内容后，使用此代码（dt_table 是我的响应式 DataTable 实例）：
dt_table.draw();
dt_table.columns.adjust().responsive.recalc();
More info: https://datatables.net/reference/api/responsive.recalc()
更多信息：https: //datatables.net/reference/api/responsive.recalc()
回答by cem
In my case I found that hiding the table or it's container on page load using CSS display:none was avoiding the responsive behaviour.
就我而言，我发现使用 CSS display:none 在页面加载时隐藏表格或它的容器是在避免响应行为。
The (unpreferred) solution is to hide the table or it's container by JavaScript instead of CSS.
（不推荐的）解决方案是通过 JavaScript 而不是 CSS 隐藏表格或其容器。
回答by user1724023
My case is just like cem, but in my case i solved by adding setTimeout to wait a while (around 200 miliseconds) to set datatable
我的情况就像 cem，但在我的情况下，我通过添加 setTimeout 等待一段时间（大约 200 毫秒）来设置数据表来解决
回答by Ali Kleit
What worked for me is placing the table in a container with a custom class dtable-container
对我有用的是将桌子放在一个带有自定义类的容器中 dtable-container
HTML
HTML
<div class="dtable-container">
<table id="datatable" class="table table-striped table-bordered">
</table>
</div>
CSS/LESS
CSS/更少
.dtable-container {
max-width: 100% !important;
table {
white-space: nowrap !important;
width:100%!important;
border-collapse:collapse!important;
}
}
回答by Sumit Kumar Gupta
You need to include responsive css and js
您需要包含响应式 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>
This is working for me. One thing always keep in mind that you have to include jquery and datatable css and js.
这对我有用。始终记住一件事，您必须包含 jquery 和数据表 css 和 js。
$('.dataTable').dataTable({
"responsive": true,
});
回答by Jorge Diaz
Updating from DataTables version 1.10.12 to 1.10.8 I encountered a similar issue.
从 DataTables 版本 1.10.12 更新到 1.10.8 我遇到了类似的问题。
An accessibility scan had flagged the width="100%" and cellspacing attributes negatively so I removed them from the html and switch to a css selector in a separate file.
可访问性扫描已将 width="100%" 和 cellpacing 属性标记为负面，因此我将它们从 html 中删除并切换到单独文件中的 css 选择器。
Tables resizing began to fail and started triggering horizontal scroll bars. I noticed the the element was having it's style automatically set to style="width: px;".
调整表格大小开始失败并开始触发水平滚动条。我注意到元素的样式自动设置为 style="width: px;"。
I had to set the selector in the css to width: 100% !important. The border-spacing attribute did not require this.
我必须将 css 中的选择器设置为 width: 100% !important。border-spacing 属性不需要这个。
I had seen other answers where the 100% width had been mentioned but what I didn't realize was that in needed the "!important" tag.
我看过其他答案，其中提到了 100% 宽度，但我没有意识到需要“！重要”标签。
I was never able to determine what triggered the change but we're using jquery.dataTables.js and dataTables.responsive.js along with bootstrap.
我永远无法确定是什么触发了更改，但我们正在使用 jquery.dataTables.js 和 dataTables.responsive.js 以及引导程序。
