表格分页 [Bootstrap - Django]

Posted 2023-02-24

【中文标题】表格分页 [Bootstrap - Django]

【英文标题】：Table Pagination [Bootstrap - Django]

【发布时间】：2020-07-26 12:11:32

【问题描述】：

我正在处理一个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>

【参考方案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>

【讨论】：

非常感谢您的回答。我想问你在传递到另一个页面之前它显示了多少个寄存器？

注册是什么意思？

我的意思是表格将被数据填充，我只是在表格中填充了很多寄存器（比如 20 个），而我的表格仍然在第一页显示它们。有机会你知道该怎么做吗？谢谢你！！！

循环page-item，就像你循环表格一样，上面只是静态html。

哦，我明白了。好的，会试试的。谢谢你！