MyBatis实现用户的动态搜索分页等功能(5)

最新推荐文章于 2021-08-23 11:16:18 发布

原创最新推荐文章于 2021-08-23 11:16:18 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Mybatis #Ajax

Mybatis 同时被 2 个专栏收录

7 篇文章

订阅专栏

Ajax

3 篇文章

订阅专栏

本文详细介绍了一个基于Ajax的前端页面设计，实现了用户信息的分页显示、批量删除及动态查询等功能。通过JavaScript代码，文章展示了如何进行全选操作、批量删除用户信息，并通过异步请求实现数据的增删查改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现前台页面显示

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">全选&nbsp;&nbsp;&nbsp;&nbsp;
<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);

进入初次页面时调用一次方法，否则会报错