Bootstrap-Table Extension Resizable qui ne fonctionne pas

**RichardUW** · 17/02/2023, 12h01

J'essaie de mettre en oeuvre la bibliothèque Bootstrap-Table (https://examples.bootstrap-table.com/#welcome.html ) pour la mise en forme de table sur mes pages web.

Tout est ok pour l'utilisation des options de base. Mais je rencontre un pb dans l'utilisation de l'extension "resizable" (https://examples.bootstrap-table.com...resizable.html) qui permet à l'utilisateur d'ajuster la largeur des colonnes.

J'ai beau reprendre le code fourni et intégré le script qui figure à la fin, la largeur des colonnes n'est pas modifiable... je vous joins code html en question en pièce jointe.

Si quelqu'un a une idée de ce qui bloque, merci d'avance

Code html :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css">    <!--issu de bootstrap-table tri-->
    <link rel="stylesheet" href="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.css"> <!-- issu de bootstrap tri pour resizable-->
 
    <!--Ressources CDN du sidebar-->
    <link rel="stylesheet" href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css>
    <link rel="stylesheet" href= https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js>
    <link rel="stylesheet" href=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js>
    <link rel="stylesheet" href=https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css> <!--contient les icones. visualisables https://github.com/atisawd/boxicons/tree/master/svg-->
 
</head>
 
<body>
 
    <table class=" table table-hover table-striped" 
        data-toggle="table"
        data-search="true"
        data-search-align="left"
        data-show-columns="true"
        data-show-columns-toggle-all="true"
        data-buttons-align="left"
        data-pagination="true"
        data-click-to-select="true"
        data-resizable="true"
        >
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-sortable="true" data-searchable = "true" data-field="i">Client</th>
                <th data-sortable="true" data-field="nom">Nom du contact</th>
                <th>adresse mail</th>
            </tr>
        </thead>
        <tbody> 
            <tr>
                <td></td>
                <td>Société A</td>
                <td>Dupond</td>
                <td>dupond@yahoo.com</td>
            </tr>
            <tr>
                <td></td>
                <td>Société B</td>
                <td>Durand</td>
                <td>durand@gmail.com</td>
            </tr>
        </tbody>
    </table>
 
    <script>
        $(function() {
          $('#table').bootstrapTable()
        })
      </script>
</body>
 
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <!--issu de bootstrap-table tri-->
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
 
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>   <!--issu de bootstrap-table tri-->
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" 
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>   <!--issu de bootstrap-table tri-->
 
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>  <!--issu de bootstrap-table tri-->
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/locale/bootstrap-table-fr-FR.min.js"></script> <!--issu de bootsrap-table tri, pour français-->
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 
    <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script> <!-- issu de bootstrap tri pour resizable-->
</html>

Bootstrap-Table Extension Resizable qui ne fonctionne pas

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager