使用ajax、pageHelpler分页插件、利用json数据特性实现分页查询
2017-12-29 10:56
1046 查看
注:博主用到了Bootstrap 框架美化页面
页面代码
在加载jsp页面时发送请求得到数据
Controller类
Test类json数据封装
页面代码
<table class="table table-hover"> <thead> <tr> <td>id</td> <td>name</td> <td>phone</td> <td>emp_sex</td> <td>emp_post</td> <td>emp_status</td> <td>emp_indate</td> <td>emp_outdate</td> <td>emp_other</td> <td>操作</td> </tr> </thead> <tbody id="ok"> </tbody> </table> <!--当前页 总页数 总记录数 --> <p id="pagehelp"></p> <!-- 分页按键 --> <nav aria-label="Page navigation"> <ul id="jbgao" class="pagination"> </ul> </nav>
在加载jsp页面时发送请求得到数据
<script type="text/javascript"> $(function() { $.ajax({ type : "POST", url : "sdf/test", data : "", success : function(result) { //alert(result.returnData.keys[1].empId); //成功调用。。。 showAll(result); showing(result); } }); }); //博主是在首次插入时数据给每个td一个id然后用一个loadXMLDoc()函数通过每个id替换之前的数据,博主这里有点脱裤子放屁了 function showAll(result) { //可以不加id不写loadXMLDoc()直接在这写一个empty()清空上一次的数据代码更可观 var test=0; $.each(result.returnData.keys.list, function(index, item) { var ok = $("<td></td>").attr("id","myid"+test+"").append(item.empId); var empName = $("<td></td>").attr("id","myname"+test+"").append(item.empName); var empPhone = $("<td></td>").attr("id","myPhone"+test+"").append(item.empPhone); var empSex = $("<td></td>").attr("id","mySex"+test+"").append(item.empSex==1?"女":"男"); var empPost = $("<td></td>").attr("id","myPost"+test+"").append(item.empPost); var empstatus = $("<td></td>").attr("id","myStatus"+test+"").append(item.empStatus); var empIndate = $("<td></td>").attr("id","myIndate"+test+"").append(item.empIndate); var empOutdate = $("<td></td>").attr("id","myOutdate"+test+"").append(item.empOutdate); var show = $("<tr></tr>").append(ok).append(empName).append(empPhone).append(empSex).append(empPost) .append(empstatus).append(em 4000 pIndate).append(empOutdate).appendTo("#ok"); test++; }); } function showing(result) { var ing=result.returnData.keys.pageNum; $("#pagehelp").text("当前第" +ing+ "页,总共" + result.returnData.keys.pageSize + "页,总记录数" + result.returnData.keys.total); showzhuta(result); } function showzhuta(result){ $("#jbgao").empty(); //首页 var so=$("<li></li>").append($("<a></a>").append("首页")).appendTo("#jbgao"); so.click(function(){ loadXMLDoc(1); }); //上一页 var next=$("<li></li>").append($("<a></a>").append("<<")).appendTo("#jbgao"); if(result.returnData.keys.hasPreviousPage==true){ next.click(function(){ loadXMLDoc(result.returnData.keys.pageNum - 1); }); } //显示当前状态 $.each(result.returnData.keys.navigatepageNums, function(index, item) { var dao=$("<li></li>").append($("<a></a>").append(item)).appendTo("#jbgao"); dao.click(function(){ loadXMLDoc(item); }); }); //下一页 var next=$("<li></li>").append($("<a></a>").attr("href","#").append(">>")).appendTo("#jbgao"); if(result.returnData.keys.hasNextPage==true){ next.click(function(){ loadXMLDoc(result.returnData.keys.pageNum + 1); }); } //尾页 var ho=result.returnData.keys.pages; var ing=$("<li></li>").append($("<a></a>").append("尾页")).appendTo("#jbgao"); ing.click(function(){ loadXMLDoc(ho); }); } /* * 定义替换的方法 */ function loadXMLDoc(vi) { $.ajax({ type : "POST", url : "sdf/test?pn="+vi+"", data : "", success : function(result) { var tests = 0; $.each(result.returnData.keys.list, function(index,item){ $("#myid" + tests + "").html(item.empId); $("#myname" + tests + "").html(item.empName); $("#myPhone" + tests + "").html(item.empPhone); $("#mySex" + tests + "").html(item.empSex == 1 ? "女" : "男"); $("#myPost" + tests + "").html(item.empPost); $("#myStatus" + tests + "").html(item.empStatus); $("#myIndate" + tests + "").html(item.empIndate); $("#myOutdate" + tests + "").html(item.empOutdate); tests++; }); showing(result); } }); } </script>
Controller类
import java.util.List; import javax.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView; import com.budo.beancla.Employee; import com.budo.beancla.Performance; import com.budo.run.Test; import com.budo.service.Serlet; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; @Controller @RequestMapping("/sdf") public class Context { Employee em = new Employee(); @Autowired Serlet ser; //要使用ResponseBody注解 @RequestMapping("/test") @ResponseBody public Test test(@RequestParam(value = "pn", defaultValue = "1") Integer ge) { PageHelper.startPage(ge, 3); System.out.println("yes"); //查询出数据 List<Employee> list = ser.sele(); PageInfo page=new PageInfo(list,3); //将数据返回 return Test.success().add("keys", page); } }
Test类json数据封装
import java.util.HashMap; import java.util.Map; public class Test { // 666即成功,444即失败 private int code; // 提示信息 private String msg; // 服务端要返回到客户端的数据 private Map<String, Object> ReturnData = new HashMap<String, Object>(); /** * 自定义一个简单的成功方法 * @return */ public static Test success(){ Test msg = new Test(); msg.setCode(666); msg.setMsg("执行成功!"); return msg; } /** * 自定义一个简单的失败方法 * @return */ public static Test fail(){ Test msg = new Test(); msg.setCode(444); msg.setMsg("执行失败!"); return msg; } /** * 自定义一个添加返回数据的方法 * @return */ public Test add(String arg0,Object arg1){ this.getReturnData().put(arg0, arg1); return this; } public Map<String, Object> getReturnData() { return ReturnData; } public void setReturnData(Map<String, Object> returnData) { ReturnData = returnData; } public int getCode() { return code; } public void setCode(int code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } }
相关文章推荐
- jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
- oracle12c JSON数据 使用SQL语句实现多表左外连接 显示无效数据 分页查询
- struts2学习笔记--使用struts2插件实现ajax处理(返回json数据)
- ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax:实现数据的增删查改,查询和分页!
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- ajax获取json数据使用jquery分页插件显示
- 用jQuery中的ajax返回的json数据组合查询和组合查询的分页源码
- 根据ajax发送数据,从servelt中读取xml数据并显示,实现查询、删除和分页
- rails2.3.XX中使用will_paginate分页插件,并实现Ajax分页
- java web中使用过滤器实现数据查询的分页显示
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- JQuery实现基于Ajax的数据查询、排序和分页功能
- FireFox中使用JQuery的ajaxfileupload插件返回JSON格式数据提示保存的解决方法。
- 使用 XMLHttpRequest 实现 Ajax 三:取回 Json 数据
- struts2 + spring +jquery实现AJAX (使用了struts2 的json插件)
- asp.net 2.0中利用Ajax2.0实现JSON传送大量页面数据
- struts2之使用JSON插件实现Ajax(JSON基本知识)