Я отображаю список объектов состояния (с помощью 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-страницу в начале, затем я вижу сообщение о загрузке и, наконец, таблицу со всеми загруженными элементами.
Я думаю, что мне нужно вмешаться до (или во время) создания таблицы, но я не знаю как. Что мне нужно сделать, чтобы таблица отображалась правильно, чтобы пользователь не заметил уродливую таблицу «un-bootstraped»?