Таблица нумерации страниц RIOT с использованием Bootstrap

Question

Я использую язык RIOT для разработки своего веб-сайта, и я хотел бы сделать нумерацию картин.

Я использую bootstrap (https://getbootstrap.com/) и могу не удается разбить на страницы мою таблицу: выберите количество элементов для отображения и селекторы страниц внизу.

Вот мой код (в моем бунтовом теге), вы можете мне помочь? Я испробовал несколько приемов, но ничего не получилось.

<div class="container">
        <div class="form-group">
            <h6><strong>Nombre de résultats par page :</strong></h6>
            <select class  ="form-control" name="state" id="maxRows">
                <option value="5000">Tout afficher</option>
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        <div>

        <br>

        <div id="page-affichage">
            <table id="table-recherche-artist" class="table table-striped table-class">
                <thead class="thead-dark">
                    <tr each = "{item in tab_entete_artiste}">
                        <th onclick="sortTable(0)" class="th-sort th-sm">{item.titre_nom}</th>
                        <th onclick="sortTable(1)" class="th-sort th-sm">{item.titre_desc}</th>
                        <th onclick="sortTable(2)" class="th-sort th-sm">{item.titre_pays}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr each = "{item in tab_item_artiste}">
                        <td>{item.item_nom}</td>
                        <td>{item.item_desc}</td>
                        <td>{item.item_pays}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <br>

        <div class='pagination-container' >
            <nav>
                <ul class="pagination">
                    <li data-page="prev" >
                        <span> < <span class="sr-only">(current)</span></span>
                    </li>
                    <li data-page="next" id="prev">
                        <span> > <span class="sr-only">(current)</span></span>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

<script>

        export default {
            _changeSelect(e) {
                console.log(e.target.value);
            },

            tab_entete_artiste: [
                {titre_nom: "Nom", titre_desc: "Description", titre_pays: "Pays"}
            ],

            tab_item_artiste: [
                {item_nom: "Juice WRLD", item_desc: "US rapper", item_pays:"United States"},
                {item_nom: "Michael Jackson", item_desc: '"King of Pop"', item_pays:"United States"},
                {item_nom: "Robert B. Sherman", item_desc: "Aucune données", item_pays:"United States"},
                {item_nom: "Richard M. Sherman", item_desc: "Aucune données", item_pays:"United States"},
                {item_nom: "Jul", item_desc: "Rappeur français", item_pays:"France"},
                {item_nom: "Stromae", item_desc: "Musicien Belge", item_pays:"Belgique"},
                {item_nom: "Justin Bieber", item_desc: "Aucune données", item_pays:"Canada"},
            ],
        }
    </script>

Спасибо!