Table Pagination [Bootstrap - Django]

Question

我正在处理一个django-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，我在nav标签中添加了d-flex justify-content-center类，如果您需要左侧的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>