it-swarm.com.de

Responsive Bootstrap Datable kollabiert Spalten nicht am richtigen Punkt

Ich verwende Datatables.net mit Datatables und Bootstrap. Ich nehme an, meine Frage ist: Was verwendet Datatables Responsive Bootstrap zum Erkennen von Überlauf, da es eindeutig nicht die übergeordnete Breite ist.

Hier ist mein Ergebnis: enter image description here

Es ist ein ziemlich direktes Problem. Wenn ich die Breite meines Fensters um 1 Pixel verkleinere, wird die Spalte endgültig reduziert. Wenn ich es dann ausdehne, kehrt es in diesen Zustand zurück. Ich möchte einen Überlauf aus dem übergeordneten Bootstrap-Panel verhindern. Ich habe die Bootstrap-Grid-divs (row/col-xs-12 usw.) entfernt, um potenzielle Probleme zu beseitigen, aber sobald das Problem gelöst ist (oder ich verstehe das Problem besser), möchte ich auch das Bootstrap-Grid-System verwenden. 

Hier ist ein Plunkr, der das Problem perfekt repliziert hat (Reduzieren Sie die Ausführungsansicht): 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>
33
nograde

Add Div mit Klasse "Table-responsive" vor dem Start der Tabelle und lösche width = "100%" vom Table-Tag,

<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>

38
coDe murDerer

ich weiß, dass dieser Beitrag alt ist. Für alle, die versuchen, dies zu erledigen, tun Sie dies einfach 

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

add width = "100%" sollte es nehmen und reagieren lassen, ohne dass eine Konfiguration vorgenommen wird 

check out Fiddle arbeiten

11

Für mich wurde das Problem behoben, wenn ich den Tabellencontainer div in eine Bootstrap-Zeile div legte.

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

Der Grund dafür war, dass die Bootstrap-Version von datatables der Symbolleiste (in meinem Fall) einige col- * hinzufügte, die als direkte Kinder unter einem anderen übergeordneten col -lagen. Die Spalte sollte im Idealfall untergeordnete Reihen sein (soweit ich das verstehe) . enter image description here

5
ZedBee

Ich weiß, dass dieser Beitrag alt ist, aber wenn jemand dieses Problem hat, versuchen Sie Folgendes:

Verwenden Sie nach dem Aktualisieren des Inhalts der DataTable diesen Code (dt_table ist meine Instanz einer Responsive DataTable):

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

Weitere Informationen: https://datatables.net/reference/api/responsive.recalc ()

2
Erick Elizondo

In meinem Fall habe ich festgestellt, dass das Ausblenden der Tabelle oder des Containers beim Laden der Seite mithilfe der CSS-Anzeige fehlgeschlagen ist.

Die (nicht bevorzugte) Lösung besteht darin, die Tabelle oder den Container durch JavaScript anstelle von CSS auszublenden.

1
cem

Was für mich funktioniert hat, ist das Platzieren der Tabelle in einem Container mit einer benutzerdefinierten Klasse dtable-container

HTML

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

  </table>
 </div>

CSS/WENIGER

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


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


0
Ali Kleit

Mein Fall ist genau wie bei cem, aber in meinem Fall habe ich das Problem gelöst, indem ich setTimeout hinzugefügt habe, um eine Weile zu warten (etwa 200 Millisekunden), um die Dateneinstellung festzulegen

0
user1724023

Sie müssen responsive CSS und JS einbinden

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>

Das funktioniert für mich. Denken Sie immer daran, dass Sie jquery und datatable css und js einschließen müssen.

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

    });
0