Redimensionnage tableau avec boostrap et jquery

Fermé

lynow Messages postés 22 Date d'inscription jeudi 18 mars 2021 Statut Membre Dernière intervention 28 juin 2023 - 28 juin 2023 à 12:40
Pitet - 28 juin 2023 à 19:00

Bonjour,

Je développe un projet sur Django et j'ai besoin de créer un template HTML qui affiche un tableau. De plus, j'aimerais qu'il soit possible pour l'utilisateur de redimensionner le tableau. J'ai donc rechercher comment faire sur internet et j'ai trouvé ce genre code :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tableau redimensionnable</title>
  <link href="https://unpkg.com/bootstrap-table@1.22.0/dist/bootstrap-table.min.css" rel="stylesheet">
  <link href="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.css" rel="stylesheet">
</head>
<body>
  <table id="table"
    data-show-columns="true"
    data-search="true"
    data-show-toggle="true"
    data-pagination="true"
    data-resizable="true">
    <thead>
      <tr>
        <th data-field="id" data-sortable="true">ID</th>
        <th data-field="name" data-sortable="true">Item Name</th>
        <th data-field="price" data-sortable="true">Item Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Product A</td>
        <td>$10.00</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Product B</td>
        <td>$20.00</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Product C</td>
        <td>$30.00</td>
      </tr>
    </tbody>
  </table>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.22.0/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.22.0/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>

  <script>
    $(function() {
      $('#table').bootstrapTable();
    });
  </script>
</body>
</html>

Quand je créé un template avec ce code et que je l'affiche, j'obtiens un tableau sans lignes ni colonnes et avec des boutons affichés à moitié.

J'ai essayé d'apporter des modifications mais rien n'y fait. Savez-vous pourquoi cela fait ça ? Car ce code est censé fonctionner au vu des affichages donnés également sur internet.

Sachant que le redimensionnement fonctionne, mais bon lorsque j'ajoute mes données, qui sont conséquentes, le tableau est imbuvable.

J'ai également tenté avec :

  <script>
    $(function() {
      $('#table').resizableColumns();
    });
  </script>

Mais c'est encore pire, plus aucune fonctionnalité ne s'affiche.

A voir également:

Redimensionnage tableau avec boostrap et jquery
Tableau croisé dynamique - Guide
Tableau ascii - Guide
Tableau word - Guide
Trier tableau excel - Guide
Le nom du champ de tableau croisé dynamique n'est pas valide ✓ - Forum Excel

1 réponse

Réponse 1 / 1

Pitet
28 juin 2023 à 19:00

Bonjour,

Bootstrap Table est une extension du framework Bootstrap, il faut donc bien inclure ce dernier (bootstrap.min.css et bootstrap.bundle.min.js) pour utiliser l'extension.

Voir https://bootstrap-table.com/docs/getting-started/introduction/#starter-template

Discussions similaires

Tableau croisé dynamique - absence de certaines données

Modèle fichier excel comparateur mutuelle

Bibliothèque

Formule taux de marque

generateur de combinaison du loto 5/90