Thymeleaf+Ajax实现异步加载表格数据并分页实现
<div id="roles_card" class="card m-b-20">
<div class="card-body">
<table id="roles_table" class="table table-striped table-hover table-bordered" width="100%" >
<thead>
<tr class="text-center font-16">
<th>编号</th>
<th>角色描述</th>
<th>创建时间</th>
<th>可用状态</th>
<th >分配权限</th>
</tr>
</thead>
<tbody>
<tr th:each="role:${}">
<td class="text-center" th:text="${()}">1</td>
<td class="text-center" th:text="${()}">学院领导</td>
<td class="text-center" th:text="${#((), 'yyyy-MM-dd HH:mm')}">2021-1-13</td>
<td class="text-center">
<span th:if="${()=='0'}" th:value="0"
class="btn btn-sm text-white" style="background-color: #5cca78">可用</span>
<span th:if="${()=='1'}" th:value="1"
class="btn btn-sm text-white" style="background-color: #be2626">不可用</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<div class="row">
<!--此处pageInfo是mybatisplus自带分页生成的分页信息，包含records：值，total：总数
current：当前页，pages：所有页等-->
<div class="col-6">
当前第[[${pageInfo.current}]]页,总共[[${pageInfo.pages}]]页,总[[${pageInfo.total}]]条记录
</div>
<div class="col-6">
<ul class="pagination mt-2">
<li class="page-item" th:classappend="${}<1?'disabled':''">
<a class="page-link" onclick="to_page(1)">首页</a></li>
<li class="page-item" th:classappend="${}<=1?'disabled':''">
<a class="page-link" th:onclick="to_page([[${}-1]])">前一页</a></li>
<li class="page-item" th:each="i :${#(1,)}"
th:classappend="${ == i}? 'page-item active' :'page-item' ">
<a class="page-link" th:text="${i}" th:onclick="to_page([[${i}]])"></a></li>
<li class="page-item"
th:classappend="${}ge${}?'disabled':''">
<a class="page-link" th:onclick="to_page([[${}+1]])">后一页</a></li>
<li class="page-item"><a class="page-link" th:onclick="to_page([[${}]])"> 末页</a></li>
</ul>
</div>
</div>
</div>
</div>