Нумерация таблиц [Bootstrap - Джанго]

Question

Я работаю над проектом django-bootstrap, и у меня возникли проблемы с нумерацией таблиц bootstrap, она не появится в моем шаблоне. Я использую одну из стандартных таблиц bootstrap со своими собственными стилями, и я хотел попросить вас, ребята, за вашу помощь, чтобы дать моему столу нумерацию страниц, которая ему нужна.

<table id="table1" class="table table-bordered table-striped" style="width:1200px; margin-left:-45px">
    <thead>
        <tr>
            <th class="header1"> </th>
            <th class="header1">ID Riesgo</th>
            <th class="header1">Código Riesgo</th>
            <th class="header1">Característica</th>
            <th class="header1">Evento</th>
        </tr>
    </thead>
    <tbody>
        {% for riesgos in riesgos %}
        <tr style="height: -2px;">
            <td style="text-align:center;">
                <div class name="checkboxWrapper">
                    <input type="checkbox" id="check" hidden="true" style="margin-top: 10px;" />
                    <label for="check" class="checkmark"></label>
                </div>
            </td>
            <td style="color:#A9A9A9 ;">{{riesgos.id_ri}}</td>
            <td style="color:#A9A9A9;">{{riesgos.cod_ri}}</td>
            <td style="color:#A9A9A9;">{{riesgos.caracterisitica}}</td>
            <td style="color:#A9A9A9;">{{riesgos.evento}}</td>
            {% endfor %}
        </tr>
    </tbody>
</table>

Answer 1

Посмотрите этот фрагмент, таблица отлично работает, и я добавил для вас нумерацию страниц в коде.

Для центра pagination Я добавил d-flex justify-content-center классов в ваш тег nav, не стесняйтесь удалить его, если вы нужно pagination в левой части.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<table id="table1" class="table table-bordered table-striped" style="width:1200px; margin-left:-45px">
    <thead >
        <tr> 
            <th class="header1">  </th>
            <th class="header1">ID Riesgo</th>
            <th class="header1">Código Riesgo</th>
            <th class="header1">Característica</th>
            <th class="header1">Evento</th>
        </tr>
    </thead> 
    <tbody>
            <!-- {% for riesgos in riesgos %} -->
            <tr style="height: -2px;">
                <td style="text-align:center;">
                    <div class name="checkboxWrapper">
                         <input  type="checkbox" id="check" hidden="true" style="margin-top: 10px;"/>
                         <label for="check" class="checkmark" ></label>
                    </div>
                </td>
                <td style="color:#A9A9A9 ;">{{riesgos.id_ri}}</td>
                <td style="color:#A9A9A9;">{{riesgos.cod_ri}}</td>
                <td style="color:#A9A9A9;">{{riesgos.caracterisitica}}</td>
                <td style="color:#A9A9A9;">{{riesgos.evento}}</td>
            <!-- {% endfor %} -->
            </tr>
    </tbody>
</table>

<nav class="d-flex justify-content-center" aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>