MyBatis实现用户的动态搜索分页等功能(5)
实现前台页面显示
PaginationUser.jsp
body部分
<label>用户名:
<input type="text" name="nameee" id="nameee" value=""/>
</label>
角色:
<label>
<select name="selectrole" id="selectrole">
<option value="0">全部</option>
<option value="1">会员</option>
<option value="2">高级会员</option>
<option value="3">钻石会员</option>
</select>
</label>
<label>
<input type="button" onclick="pagelist(1)" value="搜索"/>
</label>
<table width="646" height="234" border="1" cellpadding="1" cellspacing="1">
<tr>
<td align="center">序号</td>
<td align="center">姓名</td>
<td align="center">性别</td>
<td align="center">角色</td>
<td align="center">操作</td>
</tr>
</table>
<input type="checkbox" name="select" id="checkall">全选
<input type="button" onclick="return DelSelect()" value="删除"/>
<input type="button" id="btn1" value="上一页" alt="1" />
<input type="button" id="btn2" value="下一页" alt="2" />
当前页码<font color="red" size="5" name="fcount">1</font>
<input type="button" onclick="return IncreaseUser()" value="增加"/>
在这里我们使用Ajax异步刷新实现所有功能并分页
- 显示所有用户信息
- 增加用户信息
- 删除用户信息
- 批量删除用户信息
- 模糊查询用户
- 多条件动态查询用户信息
实现批量删除
思路:先获取所有选中的id然后拼接成字符串再传到servlet层处理
javaScript代码实现
//全选
$("#checkall").click(function(){
$("input[name='ids']").each(function(){
if (this.checked) {
this.checked = false;
}
else {
this.checked = true;
}
});
})
function del(){
if(confirm("确定要删除吗?")){
return true;
}else{
return false;
}
}
var becheckbox;
function DelSelect(){
var msg = "您真的确定要删除吗?";
if (confirm(msg)==true){
var becheckbox = "";
$("input[name='ids']").each(function(){ //遍历table里的全部checkbox
if(this.checked) //如果被选中
becheckbox += $(this).attr("vv") + ","; //获取被选中的值
});
alert(becheckbox);
if(becheckbox.length > 0){ //如果获取到
becheckbox = becheckbox.substring(0, becheckbox.length - 1); //把最后一个逗号去掉
location.href="BatchDeletion?becheckbox="+becheckbox;
}
}else{
return false;
}
}
实现分页功能
var allnum=0;
$("#btn1,#btn2").on("click",function(){
//取当前按钮的alt的值
count=$(this).attr("alt");
pagelist(count);
});
function pagelist(pcount){
var nameee = $("#nameee").val();
var selectrole = $("#selectrole").val();
if(pcount==1){
$("#btn1").attr("alt",1);
//这是下一页
$("#btn2").attr("alt",2);
$("font[name=fcount]").text(1);
}
$.ajax({
type:"post",
url:"Pagingsearch",
data:{"pcount":pcount,"nameee":nameee,"selectrole":selectrole},
success:function(msg){
if(msg!=null && msg!=''){
$("table tr").eq(0).nextAll().remove();
$("table").append(msg);
$("font[name=fcount]").text(pcount);
num=pcount-1;
if(num<=0)num=1;
$("#btn1").attr("alt",num);
//这是下一页
$("#btn2").attr("alt",parseInt(pcount)+1);
}
}
});
}
//当前页面加载的时候的,调用一次
pagelist(1);
进入初次页面时调用一次方法,否则会报错