web-dev-qa-db-fra.com

Bootstrap sensible Datatable ne pas réduire les colonnes au bon endroit

J'utilise la dernière version de Datatables.net, avec datatables et bootstrap. Je suppose que ma question est la suivante: Qu'est-ce que Datatables Responsive Bootstrap utilise pour détecter les débordements, car ce n'est clairement pas la largeur du parent.

Voici mon résultat: enter image description here

C'est un problème assez simple. Si je réduis la largeur de la fenêtre 1 pixel supplémentaire, la colonne sera finalement réduite. Si je le développe ensuite, il retourne à cet état. Je voudrais empêcher le débordement du panneau d'amorçage parent. J'ai supprimé les divs de la grille d'amorçage (row/col-xs-12, etc.) pour éliminer les problèmes potentiels, mais une fois que cela est résolu (ou que je comprends mieux le problème), j'ai l'intention d'utiliser également le système de grille d'amorçage. 

Voici un exemple qui réplique parfaitement le problème (réduit la vue d'exécution): 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
33
nograde

Ajoutez Div avec la classe "sensible à la table" avant le début de la table et supprimez width = "100%" de la balise table, 

<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

je sais que ce post est vieux, pour ceux qui essaient de le faire, il suffit de le faire 

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

add width = "100%" il devrait le prendre et le rendre réactif sans aucune configuration de ce type 

check out Fiddle Travailler

11
Theophilus Omoregbee

Pour moi, le problème a été résolu lorsque j'ai placé la table container div à l'intérieur d'une rangée bootstrap.

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

La raison en était que la version bootstrap de datatables ajoutait quelques colonnes * à la barre d’outils (dans mon cas) qui tombaient en tant qu’enfants directs sous un autre parent col -. Les colonnes idéalement devraient être des enfants de row plutôt que de col (autant que je sache) .  enter image description here

5
ZedBee

Dans mon cas, j'ai constaté que cacher la table ou son conteneur lors du chargement de page à l'aide de l'affichage CSS: aucun n'évitait le comportement réactif.

La solution (non préférée) consiste à masquer la table ou son conteneur par JavaScript au lieu de CSS.

1
cem

Mon cas est juste comme cem, mais dans mon cas, j'ai résolu en ajoutant setTimeout d'attendre un moment (environ 200 millisecondes) pour mettre datatable

0
user1724023