使用ajax、pageHelpler分页插件、利用json数据特性实现分页查询
注：博主用到了Bootstrap 框架美化页面
页面代码
1 <table class="table table-hover">
2 <thead>
3 <tr>
4 <td>id</td>
5 <td>name</td>
6 <td>phone</td>
7 <td>emp_sex</td>
8 <td>emp_post</td>
9 <td>emp_status</td>
10 <td>emp_indate</td>
11 <td>emp_outdate</td>
12 <td>emp_other</td>
13 <td>操作</td>
14 </tr>
15 </thead>
16 <tbody id="ok">
17
18 </tbody>
19 </table>
20 <!--当前页 总页数 总记录数 -->
21 <p id="pagehelp"></p>
22
23 <!-- 分页按键 -->
24 <nav aria-label="Page navigation">
25 <ul id="jbgao" class="pagination">
26
27 </ul>
28 </nav>
在加载jsp页面时发送请求得到数据
1 <script type="text/javascript">
2 $(function() {
3 $.ajax({
4 type : "POST",
5 url : "sdf/test",
6 data : "",
7 success : function(result) {
8 //alert(result.returnData.keys[1].empId);
9 //成功调用。。。
10 showAll(result);
11 showing(result);
12 }
13 });
14 });
15 //博主是在首次插入时数据给每个td一个id然后用一个loadXMLDoc()函数通过每个id替换之前的数据,博主这里有点脱裤子放屁了
16 function showAll(result) {
17 //可以不加id不写loadXMLDoc()直接在这写一个empty()清空上一次的数据代码更可观
18 var test=0;
19 $.each(result.returnData.keys.list, function(index, item) {
20 var ok = $("<td></td>").attr("id","myid"+test+"").append(item.empId);
21 var empName = $("<td></td>").attr("id","myname"+test+"").append(item.empName);
22 var empPhone = $("<td></td>").attr("id","myPhone"+test+"").append(item.empPhone);
23 var empSex = $("<td></td>").attr("id","mySex"+test+"").append(item.empSex==1?"女":"男");
24 var empPost = $("<td></td>").attr("id","myPost"+test+"").append(item.empPost);
25 var empstatus = $("<td></td>").attr("id","myStatus"+test+"").append(item.empStatus);
26 var empIndate = $("<td></td>").attr("id","myIndate"+test+"").append(item.empIndate);
27 var empOutdate = $("<td></td>").attr("id","myOutdate"+test+"").append(item.empOutdate);
28 var show = $("<tr></tr>").append(ok).append(empName).append(empPhone).append(empSex).append(empPost)
29 .append(empstatus).append(empIndate).append(empOutdate).appendTo("#ok");
30 test++;
31 });
32 }
33 function showing(result) {
34 var ing=result.returnData.keys.pageNum;
35 $("#pagehelp").text("当前第" +ing+ "页,总共" + result.returnData.keys.pageSize
36 + "页,总记录数" + result.returnData.keys.total);
37 showzhuta(result);
38 }
39
40 function showzhuta(result){
41 $("#jbgao").empty();
42 //首页
43 var so=$("<li></li>").append($("<a></a>").append("首页")).appendTo("#jbgao");
44 so.click(function(){
45 loadXMLDoc(1);
46 });
47 //上一页
48 var next=$("<li></li>").append($("<a></a>").append("<<")).appendTo("#jbgao");
49 if(result.returnData.keys.hasPreviousPage==true){
50 next.click(function(){
51 loadXMLDoc(result.returnData.keys.pageNum - 1);
52 });
53 }
54 //显示当前状态
55 $.each(result.returnData.keys.navigatepageNums, function(index, item) {
56 var dao=$("<li></li>").append($("<a></a>").append(item)).appendTo("#jbgao");
57 dao.click(function(){
58 loadXMLDoc(item);
59 });
60 });
61 //下一页
62 var next=$("<li></li>").append($("<a></a>").attr("href","#").append(">>")).appendTo("#jbgao");
63 if(result.returnData.keys.hasNextPage==true){
64 next.click(function(){
65 loadXMLDoc(result.returnData.keys.pageNum + 1);
66 });
67 }
68 //尾页
69 var ho=result.returnData.keys.pages;
70 var ing=$("<li></li>").append($("<a></a>").append("尾页")).appendTo("#jbgao");
71 ing.click(function(){
72 loadXMLDoc(ho);
73 });
74 }
75
76 /*
77 * 定义替换的方法
78 */
79 function loadXMLDoc(vi) {
80 $.ajax({
81 type : "POST",
82 url : "sdf/test?pn="+vi+"",
83 data : "",
84 success : function(result) {
85 var tests = 0;
86 $.each(result.returnData.keys.list, function(index,item){
87 $("#myid" + tests + "").html(item.empId);
88 $("#myname" + tests + "").html(item.empName);
89 $("#myPhone" + tests + "").html(item.empPhone);
90 $("#mySex" + tests + "").html(item.empSex == 1 ? "女" : "男");
91 $("#myPost" + tests + "").html(item.empPost);
92 $("#myStatus" + tests + "").html(item.empStatus);
93 $("#myIndate" + tests + "").html(item.empIndate);
94 $("#myOutdate" + tests + "").html(item.empOutdate);
95 tests++;
96 });
97 showing(result);
98
99 }
100 });
101 }
102 </script>
Controller类
1 import java.util.List;
2
3 import javax.servlet.http.HttpServletRequest;
4
5 import org.springframework.beans.factory.annotation.Autowired;
6 import org.springframework.stereotype.Controller;
7 import org.springframework.web.bind.annotation.RequestMapping;
8 import org.springframework.web.bind.annotation.RequestParam;
9 import org.springframework.web.bind.annotation.ResponseBody;
10 import org.springframework.web.servlet.ModelAndView;
11
12 import com.budo.beancla.Employee;
13 import com.budo.beancla.Performance;
14 import com.budo.run.Test;
15 import com.budo.service.Serlet;
16 import com.github.pagehelper.PageHelper;
17 import com.github.pagehelper.PageInfo;
18
19 @Controller
20 @RequestMapping("/sdf")
21 public class Context {
22 Employee em = new Employee();
23
24 @Autowired
25 Serlet ser;
26 //要使用ResponseBody注解
27 @RequestMapping("/test")
28 @ResponseBody
29 public Test test(@RequestParam(value = "pn", defaultValue = "1") Integer ge) {
30 PageHelper.startPage(ge, 3);
31 System.out.println("yes");
32 //查询出数据
33 List<Employee> list = ser.sele();
34 PageInfo page=new PageInfo(list,3);
35 //将数据返回
36 return Test.success().add("keys", page);
37 }
38
39 }
Test类json数据封装
1 import java.util.HashMap;
2 import java.util.Map;
3
4 public class Test {
5 // 666即成功，444即失败
6 private int code;
7 // 提示信息
8 private String msg;
9 // 服务端要返回到客户端的数据
10 private Map<String, Object> ReturnData = new HashMap<String, Object>();
11
12 /**
13 * 自定义一个简单的成功方法
14 * @return
15 */
16 public static Test success(){
17 Test msg = new Test();
18 msg.setCode(666);
19 msg.setMsg("执行成功!");
20 return msg;
21 }
22 /**
23 * 自定义一个简单的失败方法
24 * @return
25 */
26 public static Test fail(){
27 Test msg = new Test();
28 msg.setCode(444);
29 msg.setMsg("执行失败!");
30 return msg;
31 }
32 /**
33 * 自定义一个添加返回数据的方法
34 * @return
35 */
36 public Test add(String arg0,Object arg1){
37 this.getReturnData().put(arg0, arg1);
38 return this;
39 }
40 public Map<String, Object> getReturnData() {
41 return ReturnData;
42 }
43 public void setReturnData(Map<String, Object> returnData) {
44 ReturnData = returnData;
45 }
46 public int getCode() {
47 return code;
48 }
49 public void setCode(int code) {
50 this.code = code;
51 }
52
53 public String getMsg() {
54 return msg;
55 }
56
57 public void setMsg(String msg) {
58 this.msg = msg;
59 }
60 }
浙公网安备 33010602011771号