Bootstrap datatable responsive

**patrick754** · 20/02/2020, 13h23

Bonjour

Je demande votre aide pour résoudre un problème de responsivité.

En fait j'ai un tableau que j'aimerai responsive, mais ça ne marche pas, quand je redimensionne la fenêtre, le tableau ne se redimensionne pas.

Possible de m'aider?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
    <head>
        <title>Webslesson Demo - PHP PDO Ajax CRUD with Data Tables and Bootstrap Modals</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>      
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container box">
            <h1 align="center">test</h1>
            <br />
            <div class="table-responsive">
                <br />
                <div align="right">
                    <button type="button" id="add_button" data-toggle="modal" data-target="#userModal" class="btn btn-info btn-lg">Add</button>
                </div>
                <br /><br />
                <table id="user_data" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th width="10%">Image</th>
                            <th width="35%">First Name</th>
                            <th width="35%">Last Name</th>
                            <th width="10%">Edit</th>
                            <th width="10%">Delete</th>
                        </tr>
                    </thead>
                </table>
 
            </div>
        </div>
    </body>
</html>

Merci d'avance

Cordialement

Invité · 20/02/2020, 15h48

Bonjour,

avec ton code tel quel, ça fonctionne.

**patrick754** · 20/02/2020, 16h13

Bonjour @jreaux62
Merci de la réponse. Ci dessous le résultat sur mon écran
Nom : zs.png
Affichages : 1042
Taille : 7,6 Ko

Merci

Invité · 20/02/2020, 16h50

Ça ne vient pas du code que tu montres dans le 1er message, car il fonctionne (sans rien changer).

Sur quel navigateur (et version) testes-tu ?

Par contre, il manque le doctype :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<!DOCTYPE html>
<html>
<head>
...

**patrick754** · 20/02/2020, 19h02

J'utilise Google chrome version 80

**Trehinos** · 20/02/2020, 19h51

Quelle est la largeur de l'écran ? En dessous de 768px, c'est le comportement normal : https://getbootstrap.com/docs/3.4/cs...les-responsive (ou si vous avez un zoom actif dans votre navigateur).
Sinon un <table class="table"> est censé prendre 100% de la largeur du parent sans avoir besoin d'ajouter un wrapper responsive.

Cette classe est mal nommée et ne fait plus partie de Bootstrap 4.
Elle rend le tableau "responsive" dans le sens ou elle ajoute des ascenseurs autour de celui-ci quand le conteneur devient trop petit pour ne pas casser l'affichage sur mobile. Mais elle ne fixe pas la taille du tableau à 100% (ça c'est déjà le comportement par défaut).

**patrick754** · 21/02/2020, 14h29

Bonjour Trehisnos
Merci pour la reponse, j'ai pris note. Ma resolution est de 1200*768.

Cette classe est mal nommée et ne fait plus partie de Bootstrap 4.

Comment puis je corriger cela?

cordialement

**Trehinos** · 21/02/2020, 14h35

C'est inhérent à la bibliothèque, ça ne doit pas être changé mais utilisé selon vos besoins. Vous pourriez aussi utiliser Bootstrap 4 plutôt que Bootstrap 3 mais cela vous ferait faire beaucoup de changement dans votre code... Elles ne sont pas complètement compatibles.

Que cherchez vous à faire ?
• Un tableau à 100% de la largeur ? -> enlevez <div class="table-responsive"></div>
• Un tableau à 100% de la largeur à plus 768px de large et avec des ascenseurs en-dessous de 768px ? -> laissez tel quel
• Autre chose ?

**patrick754** · 21/02/2020, 15h12

Je voudrais un tableau a 100% de la largeur sans ascenseur. En faisant la modif ca marche, mais j'aimerai bien passer sur bootstrap 4.
J'ai copié le bout de code ci dessous dans un projet utilisant bootstrap 4, ca se passe bien mais lorsque je charge les données, hop le tableau n'est plus responsive, l'ascenseur apparaît lorsque je réduis la fenêtre.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="table-responsive">
                <table id="user_data" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th width="10%">Image</th>
                            <th width="35%">First Name</th>
                            <th width="35%">Last Name</th>
                            <th width="10%">Edit</th>
                            <th width="10%">Delete</th>
                        </tr>
                    </thead>
                </table>
            </div>

Merci pour le temps accordé

**Trehinos** · 21/02/2020, 15h37

Enlevez le <div class="table-responsive"></div>.
Contrairement à ce que je croyais, cette classe existe bien dans Bootstrap 4 et se comporte comme dans Bootstrap 3.

Tableau à 100% quelle que soit la résolution = <table class="table"></table> et c'est tout. Pas de table-responsive

**patrick754** · 21/02/2020, 15h52

Tout marche bien jusqu'a ce que je charge les données. Le champs recherches et la pagination se comporte bien sauf le tableau qui reste figé. Je dois actualiser la page pour qu'il se redimensionne.

J'y comprend rien

Nom : print.jpg
Affichages : 938
Taille : 10,4 Ko

Nom : print.jpg
Affichages : 938
Taille : 10,4 Ko

**Trehinos** · 21/02/2020, 16h05

Vous utilisez la bibliothèque Datatables, je crois ?
Quand vous rechargez des données, il faut réactualiser le tableau en JS. Datatables gère plein de choses en JS et notamment le redimensionnement du tableau. Pour le coup, j'ai peu d'expérience avec cette bibliothèque et j'ai aussi galéré 2-3x...

Voyez cette fonction de l'API : https://datatables.net/reference/api/draw()

**patrick754** · 21/02/2020, 16h19

Oui j'utilise Datatable. Je regarde de ce coté alors.

Grand merci pour ton aide.

Bootstrap datatable responsive

PHP & Base de données

Discussions similaires

Partager

Partager