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/[email protected]/dist/bootstrap-table.min.css">    <!--issu de bootstrap-table tri-->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/jquery.resizableColumns.css"> <!-- issu de bootstrap tri pour resizable-->
 
    <!--Ressources CDN du sidebar-->
    <link rel="stylesheet" href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>
    <link rel="stylesheet" href= https://cdn.jsdelivr.net/npm/[email protected]/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>[email protected]</td>
            </tr>
            <tr>
                <td></td>
                <td>Société B</td>
                <td>Durand</td>
                <td>[email protected]</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/[email protected]/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/bootstrap-table.min.js"></script>  <!--issu de bootstrap-table tri-->
<script src="https://unpkg.com/[email protected]/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/[email protected]/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

Vue hybride

Discussions similaires

Partager

Partager