Question

我正在视图页面上呈现状态对象列表（带有Spring和Thymeleaf）：

<table id="state-table" data-toggle="table" data-pagination="true" data-pagination-v-align="top" data-search="true">
    <thead>
        <tr>
          <th data-sortable="true">ID</th>
          <th data-sortable="true">Descrizione</th>
          <th>Azioni</th>
        </tr>
    </thead>
    <tbody>
      <tr th:each="s : ${state}">
        <td><span th:text="${s.id}"></span></td>
        <td><span th:text="${s.descrizione}"></span></td>
      </tr> 
    </tbody>
</table>

该表包含约150个元素，但是在渲染页面时，我不到一秒钟就看到一个丑陋的页面（该插件试图对结果进行分页），我想避免这种情况。

我已经尝试过添加超时作为解决方法：

$(function() {
        $("#state-table").bootstrapTable("showLoading");

        setTimeout(function() {
            $("#state-table").bootstrapTable("hideLoading");
        }, 1000);
});

但是使用此代码，当页面呈现时，我在开始时看到一个奇怪的html页面，然后我看到了加载消息，最后看到了已加载所有元素的表。

我认为我必须在创建表之前（或同时）进行干预，但我不知道如何进行。我该怎么做才能使表正确呈现而用户不会注意到丑陋的“ unbootstraped”表？

Answer 1

尝试使用分页而不是显示所有条目。希望它能对您有所帮助：https://www.baeldung.com/spring-thymeleaf-pagination

Circumvent Boostrap-Table缓慢呈现100多行

1 个答案: