使用jQuery制作表格分页刷新功能非常简单,只需要引入jQuery和相关的分页插件,然后编写JavaScript代码即可。
首先,在HTML文件中创建一个表格,设置好表头和表格内容,给表格加上一个id,方便JavaScript代码调用。代码如下:
<table id="myTable"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>20</td> </tr> <tr> <td>李四</td> <td>女</td> <td>22</td> </tr> <tr> <td>王五</td> <td>男</td> <td>25</td> </tr> ...... </tbody> </table>
下一步,引入分页插件,这里以“datatables”为例,可以在官网上下载该插件并引入相关的CSS和JavaScript文件。代码如下:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
最后,编写JavaScript代码,使用jQuery选择器选择表格,然后调用datatables()方法即可。datatables()方法可以自动添加分页控件和搜索框,并且支持排序和筛选功能。代码如下:
<script> $(document).ready(function() { $('#myTable').DataTable(); } ); </script>
如此简单的代码,即可实现表格分页刷新功能。当然,根据实际情况可以自定义分页样式、修改数据源等。