Redimensionnage tableau avec boostrap et jquery

lynow Messages postés 20 Date d'inscription Statut Membre Dernière intervention -
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/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
  <link href="https://unpkg.com/[email protected]/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/[email protected]/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/jquery.resizableColumns.min.js"></script>
  <script src="https://unpkg.com/[email protected]/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 word - Guide
Tableau ascii - Guide
Tableau croisé dynamique - Guide
Trier tableau excel - Guide
Imprimer tableau excel sur une page - Guide

1 réponse

Réponse 1 / 1

Pitet

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

Formule taux de marque

generateur de combinaison du loto 5/90

Modèle fichier excel comparateur mutuelle

Votre réponse

Discussions similaires