<html> <head> <title>人员管理界面</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script> </head> <body> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="page-header"> <h1> <small>员工列表 —— 显示所有员工信息</small> </h1> </div> </div> </div> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-hover table-striped"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>电话号</th> <th>地址</th> <th>职位</th> <th>职位编号</th> <th>状态</th> <th>证件照</th> </tr> </thead> <tbody> <c:forEach items="${employees}" var="employees"> <tr> <td>${employees.id}</td> <td>${employees.name}</td> <td>${employees.phonenumber}</td> <td>${employees.address}</td> <td>${employees.job}</td> <td>${employees.jobid}</td> <td>${employees.state}</td> <td><img src="${pageContext.request.contextPath}/images/${employees.pic}" style="width: 100px; height: 50px"></td> <td> <a href="${pageContext.request.contextPath}/toupdate/${employees.id}">更改</a> | <a href="${pageContext.request.contextPath}/delete/${employees.id}" onclick="return confirm('确定要删除吗?')">删除</a> </td> </tr> </c:forEach> </tbody> </table> </div> </div> </div> </body> </html>给这个界面的表格实现一个分页的功能,每页的最大数目为5
时间: 2023-07-09 20:22:52 浏览: 203
好的,实现这个功能需要在后台进行分页查询并将数据传递到前台,在前台使用 JavaScript 实现分页功能。
首先,在后台需要修改查询语句,使用 LIMIT 和 OFFSET 实现分页查询。具体可以参考以下代码:
```
SELECT * FROM employees LIMIT 5 OFFSET 0;
```
其中,LIMIT 表示每页最大的数据数目,OFFSET 表示从第几条数据开始查询。
然后,在前台,可以使用 Bootstrap 的分页组件实现分页功能。具体可以参考以下代码:
```
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一页</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
</ul>
```
其中,上一页和下一页的链接需要根据当前页码进行计算,并且在点击链接时需要重新加载表格数据。
最后,可以将分页功能封装成一个 JavaScript 函数,方便在多个页面使用。
具体实现细节可以参考以下代码:
```
function initPagination(totalPages, currentPage) {
$('.pagination').twbsPagination({
totalPages: totalPages,
visiblePages: 5,
startPage: currentPage,
onPageClick: function (event, page) {
loadTableData(page);
}
});
}
function loadTableData(page) {
$.ajax({
url: 'loadTableData.php',
data: {page: page},
success: function (data) {
$('#table-body').html(data);
}
});
}
```
其中,`initPagination` 函数用于初始化分页组件,`loadTableData` 函数用于加载表格数据。在加载表格数据时,需要将当前页码传递到后台进行分页查询。
阅读全文