參考:
https://my.oschina.net/ayyao/blog/898041
后端 springboot 使用:
com.github.pagehelper.PageInfo,作為分頁對(duì)象
<!--引入分頁插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.12</version>
</dependency>
controller里代碼:
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
String orderBy = "id desc";
PageHelper.startPage(pageNum, 10, orderBy);
List<User> users = userService.list();
if (users != null) {
PageInfo<Type> pageInfo = new PageInfo<>(types);
model.addAttribute("pageInfo", pageInfo);
}
前端分頁代碼:
<tfoot>
<tr>
<th colspan="6" >
<!--分頁條 begin-->
<div class="ui left floated pagination mini menu">
<!-- 首頁 -->
<a th:href="@{/sss/userapi(pageNum=1)}" class="icon item" >首頁</a>
<!-- 上一頁previous -->
<a th:if="${pageInfo.hasPreviousPage}" class="icon item" th:classappend="${pageInfo.pageNum}==0 ? 'disabled' : ''"
th:href="@{/sss/userapi(pageNum=${pageInfo.prePage})}">
<i class="angle left icon">上一頁</i>
</a>
<!-- 中間頁面1-10頁面-->
<div th:each="p : ${pageInfo.navigatepageNums}">
<a class="icon item" th:classappend="${pageInfo.pageNum}==${p} ? 'disabled' : ''"
th:href="@{/sss/userapi(pageNum=${p})}">
<i th:text="${p}"></i>
</a>
</div>
<!-- 下一頁next -->
<a th:if="${pageInfo.hasNextPage}" class="icon item"
th:href="@{/sss/userapi(pageNum=${pageInfo.nextPage})}">
下一頁<i class="angle right icon"></i>
</a>
<!-- 尾頁 -->
<a th:href="@{/sss/userapi(pageNum=${pageInfo.pages})}" class="icon item" >尾頁</a>
</div>
<!--分頁條 end-->
</th>
</tr>
</tfoot>
首頁、中間頁、尾頁樣式:
其他:
Thymeleaf循環(huán)語句_thymeleaf 循環(huán)_苦海無邊,不能上岸的博客-CSDN博客文章來源:http://www.zghlxwxcb.cn/news/detail-732983.html
Table | Semantic UI?官網(wǎng)文章來源地址http://www.zghlxwxcb.cn/news/detail-732983.html
到了這里,關(guān)于spring boot+thymeleaf+semantic ui 分頁的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!