删除选中功能
分析:
删除选中:
1.获取选中条目的id
2.将这些id提交到servlet
servlet:
1.获取id数组
2.调用service
3.跳转到查询所有的servlet
service:
1.遍历id
2.调用dao删除方法
步骤:
1.页面调整
在table中有<input type="checkbox> 框框,可以勾选,然后获取条目的id,我们可以将复选框套在form表单中,在table外面套上form表单,<form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post"><table></table></from>
input提交需要加name属性
当我们点击删除选中按钮时,我们应该提交表单,我们需要给删除选中<a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a>按钮绑定点击事件:
window.onload = function () {
//给删除选中按钮添加单击事件
document.getElementById("delSelected").onclick = function () {
if (confirm("确定要删除选中的所有吗?")){
//判断是否有选中条目
var flag = false;
var cbs = document.getElementsByName("uid");
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked){
flag = true;
}
break;
}
if (flag){
//获取表单,并提交
document.getElementById("form").submit();
}
}
}
}
}
}
获取input的数据<input type="checkbox" name="uid" value="${user.id}">使用value来获得id
2.后端:
2.1servlet
//1.获取id
String[] ids = req.getParameterValues("uid");
//2.调用service
UserService service = new UserServiceImpl();
service.delSelected(ids);
//3.跳转到查询所有的servlet
resp.sendRedirect(req.getContextPath()+"/userListServlet");
service
@Override
public void delSelected(String[] ids) {
//防止空指针异常
if (ids != null && ids.length > 0){
//1.遍历数组
for (String id : ids) {
//2.调用dao
dao.delete(Integer.parseInt(id));
}
}
}
此处直接调用之前的删除dao就可以,因为此处遍历数组一个一个删除。
3.前台页面优化
3.1全选全不选
//全选或全不选
//获取第一个checkbbox
document.getElementById("first").onclick = function () {
//2.获取下边列表中的所有的id
var cbs = document.getElementsByName("uid");
//3.遍历
for (var i = 0; i < cbs.length; i++) {
//设置这些cbs的checked的状态 = first.checked
cbs[i].checked = this.checked;
}
}
3.2删除提示信息
//给删除选中按钮添加单击事件
document.getElementById("delSelected").onclick = function () {
if (confirm("确定要删除选中的所有吗?")){
//判断是否有选中条目
var flag = false;
var cbs = document.getElementsByName("uid");
for (var i = 0; i < cbs.length; i++) {
if (cbs[i].checked){
flag = true;
}
break;
}
if (flag){
//获取表单,并提交
document.getElementById("form").submit();
}
}
}
分页查询功能
分析图:
步骤:
1.定义分页对象,并生成getter和setter方法
private int totalCount;//总记录数
private int totalPage;//总页码
private List<T> list;//每页的数据
private int currentPage;//当前页码
private int rows;//每页显示的记录数
2.分页页面:
<div>
<nav aria-label="Page navigation">
<ul class="pagination">
<c:if test="${pb.currentPage == 1}">
<li class="disabled">
</c:if>
<c:if test="${pb.currentPage != 1}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<c:forEach begin="1" end="${pb.totalPage}" var="i">
<c:if test="${pb.currentPage == i}">
<li class="active"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
<c:if test="${pb.currentPage != i}">
<li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
</c:forEach>
<li>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<span style="font-size: 25px;margin-left: 5px;">
共${pb.totalCount}条记录,共${pb.totalPage}页
</span>
</ul>
</nav>
</div>
service
@Override
public PageBean<User> finUserByPage(String _currentPage, String _rows) {
int currentPage = Integer.parseInt(_currentPage);
int rows = Integer.parseInt(_rows);
if(currentPage <=0) {
currentPage = 1;
}
//1.创建空的PageBean对象
PageBean<User> pb = new PageBean<User>();
//2.设置参数
pb.setCurrentPage(currentPage);
pb.setCurrentPage(rows);
//3.调用dao查询总记录数
int totalCount = dao.findTotalCount();
pb.setCurrentPage(totalCount);
//4.调用dao查询List集合
//计算开始的记录的索引
int start = (currentPage - 1) * rows;
List<User> list = dao.findByPage(start,rows);
pb.setList(list);
//5.调用dao查询总页码
int totalPage = (totalCount % rows) == 0 ? (totalCount / rows) : (totalCount / rows) + 1;
pb.setTotalPage(totalPage);
return pb;
}
dao
/**
* 查询总记录数
* @return
*/
@Override
public int findTotalCount() {
String sql = "select count(*) from user";
return template.queryForObject(sql,Integer.class);
}
/**
* 分页查询每页记录
* @param start
* @param rows
* @return
*/
@Override
public List<User> findByPage(int start, int rows) {
String sql = "select *from user limit ? , ?";
return template.query(sql,new BeanPropertyRowMapper<User>(User.class),start,rows);
}