首页分页显示用户管理页面html

分页显示用户管理页面html

时间: 2023-07-27 17:05:42 浏览: 43

下面是一个简单的用户管理页面的HTML代码，包含了分页功能： ```html <!DOCTYPE html> <html> <head> <title>User Management</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid #ddd; } tr:hover { background-color: #f5f5f5; } .pagination { display: inline-block; margin-top: 20px; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; margin: 0 4px; } .pagination a.active { background-color: dodgerblue; color: white; border: 1px solid dodgerblue; } .pagination a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h1>User Management</h1> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody>  </tbody> </table> <div class="pagination"> <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div> <script> // JavaScript code for fetching user data and updating the table </script> </body> </html> ``` 在代码中，我们使用了 `table` 元素来展示用户数据，并为表格添加了CSS样式。同时，我们还添加了一个分页器 `pagination`，其中包含了多个链接，来实现分页功能。在实际使用中，你需要通过JavaScript代码从服务器获取用户数据，并将数据填充到表格中。同时，你还需要编写逻辑代码来处理分页器的点击事件，并根据用户点击的页码来更新表格中的数据。