响应式引导数据表没有在正确的点折叠列答案

【问题标题】：Responsive Bootstrap Datatable not collapsing columns at the correct point响应式引导数据表没有在正确的点折叠列
【发布时间】：2014-12-17 11:07:39
【问题描述】：

我正在使用最新的 Datatables.net，带有数据表和引导程序。我想我的问题是：Datatables Responsive Bootstrap 使用什么来检测溢出，因为它显然不是父宽度。

这是我的结果：

这是一个非常简单的问题。如果我将窗口的宽度再减小 1 个像素，则该列最终将折叠。如果我然后展开它，它会返回到这个状态。我想防止父引导面板溢出。我已经删除了引导网格 div（行/col-xs-12 等）以消除潜在问题，但是一旦解决了这个问题（或者我更好地理解了问题），我也打算使用引导网格系统。

这是一个完美复制问题的 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>

【问题讨论】：

对我来说，这个答案解决了问题：stackoverflow.com/a/1544925/5921762
我现在遇到了同样的问题stackoverflow.com/questions/44586271/…。你找到解决办法了吗？

标签： jquery twitter-bootstrap responsive-design datatables

【解决方案1】：

在表格开始之前添加具有“表格响应”类的 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>

【讨论】：

添加表格响应肯定有帮助。从表中删除 width=100% 会导致许多问题。我在容器中添加了 overflow:hidden 以防止列溢出，但我仍然看到大部分列在折叠之前被隐藏。
我在这里找到了解决方案stackoverflow.com/questions/604933/…
这是普通表的解决方案..不能在数据表中工作
从表格中删除宽度似乎带来的问题多于解决的问题。并且将表格包装在一个 div 中，如果这是最好的，我现在不这样做，特别是如果您有一些超出表格的东西，例如选项下拉列表。
自动宽度：假；在呈现数据表时设置此属性，这解决了我的问题

【解决方案2】：

我知道这篇文章已经过时了，任何想要完成这件事的人只需这样做

<table id="example" class="display" cellspacing="0" width="100%"></table>

add width="100%" 它应该接受它并使其响应而无需任何此类配置

查看Fiddle Working

【讨论】：

你还需要在配置中添加 responsive: true 。
这似乎也解决了表格内容调整大小而标题没有调整的问题。（敲木头……）

【解决方案3】：

对我来说，当我将表容器 div 放入引导行 div 时，问题得到了解决。

<div class="row">
 <div class="table-responsive">
   ... //table here
 </div>
</div>

原因是数据表引导版本正在向工具栏添加一些 col-*（在我的情况下），这些 col-* 属于另一个父 col- 下的直接子级。 col- 理想情况下应该是 row 的子代而不是 col（据我所知）。

【讨论】：

在我的情况下，这个解决方案删除了面板主体和我的桌子之间的空间

【解决方案4】：

你需要包含响应式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 和 datatable css 和 js。

$('.dataTable').dataTable({
         "responsive": true,

    });

【讨论】：

添加 cdn.datatables.net/responsive/2.2.7/css/… 和 cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.js 对我有用。我没有使用引导程序。<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css"><script src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.js"></script>

【解决方案5】：

我知道这篇文章很旧，但如果有人遇到这个问题，请尝试以下操作：

更新 DataTable 的内容后使用此代码（dt_table 是我的响应式 DataTable 实例）：

dt_table.draw();
dt_table.columns.adjust().responsive.recalc();

【讨论】：

我遇到了一个问题，即表格在最终倒塌之前向右溢出。在我将数据绑定到 dataTable 之后添加一个 tableElement.DataTable().responsive.recalc() 调用似乎可以解决这个问题。我之前使用 DataTable().row.add(value).draw() 将行添加到表中。我认为我的技术不会自动重新计算折叠宽度。
嫁给我吧！大声笑，非常感谢。挣扎几个小时，这是唯一对我有用的解决方案。我也在使用DataTable().row.add(value).draw()

【解决方案6】：

在我的例子中，我发现使用 CSS display:none 在页面加载时隐藏表格或容器可以避免响应行为。

（不推荐的）解决方案是通过 JavaScript 而不是 CSS 隐藏表格或其容器。

【讨论】：

【解决方案7】：

对我有用的是将表格放在具有自定义类 dtable-container 的容器中

HTML

 <div class="dtable-container">
  <table id="datatable" class="table table-striped table-bordered">

  </table>
 </div>

CSS/LESS

.dtable-container {
    max-width: 100% !important;


    table {
        white-space: nowrap !important;
        width:100%!important;
        border-collapse:collapse!important;
    }
}

【讨论】：

我现在正在使用我的带有数据表的迷你项目 laravel，这对我有用。太棒了！

【解决方案8】：

从 DataTables 版本 1.10.12 更新到 1.10.8 我遇到了类似的问题。

可访问性扫描已将 width="100%" 和 cellspacing 属性标记为负面，因此我将它们从 html 中删除并切换到单独文件中的 css 选择器。

表格大小调整开始失败并开始触发水平滚动条。我注意到该元素的样式自动设置为 style="width: px;"。

我必须将 css 中的选择器设置为宽度：100% !important。 border-spacing 属性不需要这个。

我看过其他提到 100% 宽度的答案，但我没有意识到需要“！important”标签。

我一直无法确定是什么触发了更改，但我们正在使用 jquery.dataTables.js 和 dataTables.responsive.js 以及引导程序。

【讨论】：

【解决方案9】：

我的情况就像 cem，但在我的情况下，我通过添加 setTimeout 来等待一段时间（大约 200 毫秒）来设置数据表来解决

【讨论】：