Utilisation de Bootstrap Table

Les utilisateurs de Bootstrap peuvent utiliser le composant "Table" pour insérer des tableaux dans leurs pages.

Il peut parfois être nécessaire de faire des tris, du filtrage, des recherches et de la pagination.

L'extension "Bootstrap Table" permet d'ajouter ces fonctionnalités de façon relativement simple.

Le modèle de base

Nous commencerons par créer un tableau HTML en utilisant le composant "Table" de Bootstrap sur le modèle ci-dessous



<!DOCTYPE html>

<html lang="fr">



<head>

    <meta charset="UTF-8">

    <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">

</head>



<body>

    <section class="container">

        <div class="row">

            <div class="col-12">

                <table class="table">

                    <thead>

                        <tr>

                            <th>ID</th>

                            <th>Nom</th>

                            <th>Prix</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr>

                            <td>1</td>

                            <td>Enceintes</td>

                            <td>35 €</td>

                        </tr>

                        <tr>

                            <td>2</td>

                            <td>PC Portable</td>

                            <td>699 €</td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </section>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>



</html>

Installer Bootstrap Table

Une fois que le contenu est en place, nous allons "installer" Bootstrap Table pour l'intégrer à notre page.

Il faut ajouter un lien vers le CSS et une balise pour le javascript, elles sont toutes deux ci-dessous



<!-- Insérer cette balise "link" après celle de Bootstrap -->

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">



<!-- Insérer cette balise "script" après celle de Bootstrap -->

<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>

Nous ajouterons ensuite un attribut "data-toggle" dans la balise table comme ceci



<table class="table" data-toggle="table" >

Activer le tri dans une colonne

Si vous souhaitez activer le tri dans l'une des colonnes du tableau, ou plusieurs, il suffit ensuite d'ajouter des attributs "data-sortable" dans les colonnes concernées (il est également possible de le faire en javascript).

Ainsi, pour activer le tri sur les colonnes "ID" et "Nom", modifiez le code comme ceci



<th data-sortable="true" data-field="id">ID</th>

<th data-sortable="true" data-field="nom">Nom</th>

Cette modification fait apparaître des flèches de tri dans chacune des colonnes modifiées.

Activer la recherche

Si vous souhaitez ajouter un champ de recherche par mots clés, l'ajout d'un attribut "data-search" dans la balise "table" permettra de le faire apparaître.



<table class="table" data-toggle="table" data-search="true">

Après cet ajout, nous avons un champ de recherche au dessus du tableau. Ce champ permet de saisir un mot clé qui filtrera le tableau.

Si nous souhaitons afficher ou masquer certaines colonnes, nous pouvons ajouter l'attribut "data-show-columns"



<table class="table" data-toggle="table" data-search="true" data-show-columns="true">

Paginer le tableau

Pour activer la pagination, au delà de 10 lignes de tableau, l'ajout de l'attribut "data-pagination" s'effectue dans la balise "table"



<table class="table" data-toggle="table" data-pagination="true">

Sous le tableau, vous trouverez les outils de pagination permettant de changer de page et de choisir le nombre d'éléments à afficher.

Modifier la langue

Si vous souhaitez modifier la langue, et passer au Français, par exemple, nous devons ajouter une balise "script" APRES celle de Bootstrap Table.

Cette balise contiendra le code de la langue souhaitée (ici fr-FR)



<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/locale/bootstrap-table-fr-FR.min.js"></script>

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat