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
Tableau de combinaison loto 5/90 - Forum Excel
Tableau coefficient marge ✓ - 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

ou sont les bananes ?

Modèle fichier excel comparateur mutuelle

Bibliothèque

Nom de champs du tableau croisé dynamique non valide

Impossible d'afficher le rapport de tableau croisé dynamique sur un rapport

Discussions similaires

Newsletters