表格分页 [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

看到这个 sn-p，表格工作正常，我在代码中为你添加了分页。

对于中心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>