web-dev-qa-db-ja.com

Responsive Bootstrap Datatableは正しいポイントで列を折りたたみません

私は最新のDatatables.netとdatatablesとbootstrapを使用しています。私の質問は、Datatables Responsive Bootstrapがオーバーフローを検出するために使用するのは、明らかに親の幅ではないためです。

私の結果は次のとおりです。 enter image description here

これは非常に単純な問題です。ウィンドウの幅をさらに1ピクセル小さくすると、列は最終的に崩壊します。その後、展開すると、この状態に戻ります。親からのオーバーフローを防ぐためにbootstrapパネル。bootstrapグリッドdiv（row/col-xs-12など）を削除しました。潜在的な問題を排除しますが、これが解決したら（または問題をよりよく理解したら）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>
jquerytwitter-bootstrapresponsive-designdatatables
34
nograde

テーブルの開始前にクラス "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>
42
coDe murDerer

私はこの投稿が古いことを知っています。

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

width = "100％"を追加して、それを取得し、そのような設定なしで応答するようにします。

チェックアウト フィドルワーキング

12
Theophilus Omoregbee

私にとっては、テーブルコンテナdivをbootstrap行div内に配置すると問題は修正されました。

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

この理由は、datatables bootstrapバージョンがcol- *をツールバーに追加し（私の場合）、別の親col-。col-は、理想的にはcolではなくrowの子である必要があります（私が理解している限り）。 enter image description here

7
ZedBee

私はこの投稿が古いことを知っていますが、誰かがこの問題を抱えているなら、以下を試してください：

DataTableのコンテンツを更新した後、次のコードを使用します（dt_tableはResponsive DataTableのインスタンスです）：

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

詳細： https://datatables.net/reference/api/responsive.recalc（）

2
Erick Elizondo

私の場合、CSS display：noneを使用してページの読み込み時にテーブルまたはコンテナーを非表示にすると、レスポンシブな動作が回避されることがわかりました。

（好ましくない）解決策は、CSSではなくJavaScriptによってテーブルまたはそのコンテナを非表示にすることです。

1
cem

私のために働いたのは、カスタムクラス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;
    }
}
0
Ali Kleit

私の場合はcemのようですが、私の場合はsetTimeoutを追加してデータテーブルを設定するためにしばらく（約200ミリ秒）待つことで解決しました

0
user1724023

レスポンシブな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,

    });
0
Sumit Kumar Gupta