Redimensionnage tableau avec boostrap et jquery
Pitet -
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.
- Redimensionnage tableau avec boostrap et jquery
- Tableau word - Guide
- Tableau ascii - Guide
- Trier un tableau excel - Guide
- Tableau croisé dynamique - Guide
- Imprimer tableau excel sur une page - Guide
