ssm框架--用ajax做弹窗分页、搜索

来源：互联网发布：win7多线程优化编辑：程序博客网时间：2024/04/29 17:48

做管理系统，会用到很多弹窗，而这些弹窗很多时候会用到分页和搜索，下面我自己写了一个小demo，总结了下。

html代码：

<body><input type="button" value="选择学生" id="buttons"><input type="hidden" id="pageNo"><input type="hidden" id="indexNo"><br/><br/><br/><br/><br/><div style="display: none;" id="div1"><table align="center" width="50%" border="1"><tr><td>学生姓名：<input type="text" id="name"></td><td>学生班级：<input type="text" id="banji"></td><td>学生老师：<input type="text" id="laoshi"></td><td><input type="button" id="button_sousuo" value="搜索"></td></tr></table><br/><br/><br/><table align="center" width="50%" border="1"><tr><td>学生id</td><td>学生姓名</td><td>学生班级</td><td>学生老师</td><td>操作</td></tr><tbody id="students"></tbody></table><table align="center" width="50%" border="1"><tr><tbody id="foot"></tbody></tr></table></div></body>

js代码：

<script type="text/javascript">//弹窗$("#buttons").click(function(){studnet();$("#div1").fadeIn();});//异步得到数据function studnet(){//搜索条件var name=$("#name").val();    var banji=$("#banji").val();    var laoshi=$("#laoshi").val();    //当前页数    var pageNo=$("#pageNo").val();    $.ajax({url:"Student/getList",type:"post",dataType:"json",data:{"pageNo":pageNo,"name":name,"banji":banji,"laoshi":laoshi},success:function(result){var _html='';var count=result.count;//总记录数var pageNo=result.pageNo;//当前页数var indexNo=result.indexNo;//总页数$("#pageNo").val(pageNo);$("#indexNo").val(indexNo);for(var i=0;i<result.list.length;i++){_html +='<tr>'+'<td>'+result.list[i].id+'</td>'+'<td>'+result.list[i].name+'</td>'+'<td>'+result.list[i].banji+'</td>'+'<td>'+result.list[i].laoshi+'</td>'+'<td><input type="radio" value=""></td>'+'</tr>';}$("#students").html(_html);//<a>首页</a> <a>上一页</a> <a>下一页</a> <a>尾页</a></td>var foot='<td>共有'+count+'条数据，当前'+pageNo+'/'+indexNo+'页 ';foot +='';if(pageNo==1){foot +='<a href="#">首页</a> <a href="#">上一页</a> ';}else {foot +='<a href="javascript:pageChange('+1+')">首页</a> <a href="javascript:pageChange('+2+')">上一页</a> ';}if(pageNo == indexNo){foot +='<a href="#">下一页</a> <a href="#">尾页</a> ';}else{foot +='<a href="javascript:pageChange('+3+')">下一页</a> <a href="javascript:pageChange('+4+')">尾页</a>';}foot +='</td>';$("#foot").html(foot);} });}//分页function pageChange(type){if(type == '1'){   $("#pageNo").val("1");}else if(type == '2'){   if($("#pageNo").val() > '1'){      $("#pageNo").val(parseInt($("#pageNo").val()) - 1);   }}else if(type == '3'){   if($("#pageNo").val() < $("#indexNo").val()){      $("#pageNo").val(parseInt($("#pageNo").val()) + 1);}}else if(type == '4'){   $("#pageNo").val($("#indexNo").val());}else if(type == '5'){   var page = parseInt($("#pageNumFor").val()) > parseInt($("#indexNo").val()) ? $("#indexNo").val() : $("#pageNumFor").val();   $("#pageNo").val(page);}studnet();}//传感器条件查询$('#button_sousuo').click(function () {var pageNo=$("#pageNo").val() == "0"?1:$("#pageNo").val();if(pageNo > 1){ pageNo = 1;}$("#pageNo").val(pageNo)studnet();})</script>

controller代码：

@ResponseBody@RequestMapping("/getList")public Map<String, Object> getList(HttpServletRequest request,String name,String banji,String laoshi){Map<String, Object> map=new HashMap<String, Object>();int pageNo = (request.getParameter("pageNo") != null && request.getParameter("pageNo") != "") ? Integer.valueOf(request.getParameter("pageNo")) : 1;int pageSize = LIST_PAGE_SIZE;int count = (request.getParameter("count") != null) ? Integer.valueOf(request.getParameter("count")) : 0;if(count==0){    count=studentSerrvice.getCount(name,banji,laoshi);}//查询全部传感器信息List<Student> list=studentSerrvice.getList(name,banji,laoshi,(pageNo - 1) * pageSize,pageSize);map.put("list", list);map.put("count", count);map.put("pageSize", pageSize);map.put("pageNo", pageNo);map.put("indexNo", count % pageSize == 0 ? count/pageSize:count/pageSize+1);map.put("name", name);map.put("banji", banji);map.put("laoshi", laoshi);return map;}

mysql代码：

drop table if exists student;create table student(id int(11) unsigned not null auto_increment comment '学生id',name varchar(32) comment '学生名字',banji varchar(32) comment '学生班级',laoshi varchar(32) comment '学生老师',primary key (`id`))engine = innodb auto_increment = 99 default charset = utf8 comment='学生表';

如何有朋友要跑这个功能，可能会遇到一个问题，就是controller里面的@ResponseBody 注解使用不了，这个要使用，是必须ssm中要配置的，可以百度一下这个注解，我是最开始也是在这个注解上面耗了一段时间的。

0 0