单纯用<th><td>写的表格，分页实现

最新推荐文章于 2023-03-13 17:14:16 发布

xiaosongwahaha

最新推荐文章于 2023-03-13 17:14:16 发布

阅读量606

点赞数

分类专栏： JAVA常用

本文链接：https://blog.csdn.net/xiaosongwahaha/article/details/78848468

版权

本文介绍了如何使用纯HTML和JavaScript实现表格数据的分页功能。通过点击上一页、下一页按钮或输入页码直接跳转，动态加载不同页面的数据。JavaScript代码中包含lastPage、nextPage和goPageByNum函数，分别处理前后翻页和指定页码跳转，同时与后台进行交互获取数据。

摘要由CSDN通过智能技术生成

1、html：

<div id="tableList">
<table class="table table-bordered table-striped table-hover" id="rgtable1" style="color:#444444">
<thead>
<tr>
<th>角色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<#list urlBeanList as urlBean>
<tr class="odd">
<td><#if urlBean.urlType?exists>${urlBean.urlType}<#else>无</#if></td>
<td>
<button class="buttonnew button--winona2 button--round-l button--border-thin"
οnclick="urlLookUp('${urlBean.urlType}')"><span><span>查看</span></span>
</button>
<button class="buttonnew button--winona2 button--round-l button--border-thin"
οnclick="urlUpdate('${urlBean.urlType}')"><span><span>修改</span></span>
</button>
<button class="buttonnew button--winona2 button--round-l button--border-thin" οnclick="urlDelete('${urlBean.urlType}')">
<span><span>删除</span></span></button>
</td>
</tr>
</#list>
</tbody>
</table>
<#if pages??>
<div class="pageNu" align="right">
总共 ${pages?c}页|第${currentpage?c}页
<#if (currentpage>1)>
<a style='cursor:pointer;' onclick = lastPage('${currentpage?c}')>上一页</a>
<#else>
</#if>
<#if (currentpage<pages)>
<a style='cursor:pointer;' onclick = nextPage('${currentpage?c}')>下一页</a>
<#else>
</#if>
转至<input type="text" name="pageNum" id="pageNum" value="${curr