Bootstrap datatable responsive

Version imprimable

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:

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

20/02/2020, 15h48
Invité

Bonjour,

avec ton code tel quel, ça fonctionne.
20/02/2020, 16h13
patrick754

1 pièce(s) jointe(s)

Bonjour @jreaux62
Merci de la réponse. Ci dessous le résultat sur mon écran
Pièce jointe 540050

Merci
20/02/2020, 16h50
Invité
Ç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:

1 2 3 4 <!DOCTYPE html> <html> <head> ...
20/02/2020, 19h02
patrick754

J'utilise Google chrome version 80
20/02/2020, 19h51
Trehinos

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).
21/02/2020, 14h29
patrick754

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

Citation:

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

Comment puis je corriger cela?

cordialement
21/02/2020, 14h35
Trehinos

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 ?

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:

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é

21/02/2020, 15h37
Trehinos

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
21/02/2020, 15h52
patrick754

1 pièce(s) jointe(s)

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

Pièce jointe 540302
21/02/2020, 16h05
Trehinos

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()
21/02/2020, 16h19
patrick754

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

Grand merci pour ton aide.