基于Jquery+Ajax+Json实现分页显示

 

1.后台action产生json数据。

[java] view plain copy

1. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate);  
2. int totalRows = blackList.size();  
3. StringBuffer sb = new StringBuffer();  
4.          sb.append("{\"totalCount\":\""+totalRows+"\",");  
5.          sb.append("\"jsonRoot\":[");  
6.          for (int i=0;i<blackList.size();i++) {  
7.              LBlack blackInfo = (LBlack)blackList.get(i);  
8.              sb.append("{\"id\":\""+ blackInfo.getId());  
9.              sb.append("\",");    
10.              sb.append("\"mobile\":\""+ blackInfo.getMobile());  
11.              sb.append("\",");    
12.              sb.append("\"province\":\""+ blackInfo.getProvince());  
13.              sb.append("\",");    
14.              sb.append("\"gateway\":\""+ blackInfo.getGateway());  
15.              sb.append("\",");  
16.              sb.append("\"insertTime\":\""+ blackInfo.getInsertTime());  
17.              sb.append("\",");  
18.              sb.append("\"remark\":\""+ blackInfo.getRemark());  
19.              sb.append("\"");  
20.              sb.append("},");  
21.          }  
22.          sb.deleteCharAt(sb.lastIndexOf(","));  // 删去最后一个逗号  
23.          sb.append("]}");    
24.            
25.          HttpServletResponse response = ServletActionContext.getResponse();           
26.          response.setContentType("text/plain");  
27.          response.getWriter().print(sb);  

2.struts.xml相关配置

 

 

[html] view plain copy

1. <action name="blackList" class="blackAction" method="blackList">  
2.     <!--plaintext用于显示页面原始代码的结果类型-->  
3.     <result type="plainText">  
4.     <param name="charSet">UTF-8</param>  
5.     <param name="location">/WEB-INF/jsp/manage/black.jsp</param>  
6.     </result>  
7. </action>  

3.js获取json数据分页显示

 

 

[javascript] view plain copy

1. function getJSONData(pn) {  
2.     // alert(pn);  
3.     $.getJSON("blackList.ce", function(data) {  
4.         var totalCount = data.totalCount; // 总记录数  
5.         var pageSize = 10; // 每页显示几条记录  
6.         var pageTotal = Math.ceil(totalCount / pageSize); // 总页数  
7.         var startPage = pageSize * (pn - 1);  
8.         var endPage = startPage + pageSize - 1;  
9.         var $ul = $("#json-list");  
10.         $ul.empty();  
11.         for (var i = 0; i < pageSize; i++) {  
12.             $ul.append('<li class="li-tag"></li>');  
13.         }  
14.         var dataRoot = data.jsonRoot;  
15.         if (pageTotal == 1) {     // 当只有一页时  
16.             for (var j = 0; j < totalCount; j++) {  
17.                 $(".li-tag").eq(j).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>")  
18.                 .append("<span class='col2'>" + parseInt(j + 1)  
19.                         + "</span>").append("<span class='col3'>" + dataRoot[j].mobile  
20.                         + "</span>").append("<span class='col4'>" + dataRoot[j].province  
21.                         + "</span>").append("<span class='col5'>" + dataRoot[j].gateway  
22.                         + "</span>").append("<span class='col6'>" + dataRoot[j].insertTime  
23.                         + "</span>").append("<span class='col7'>" + dataRoot[j].remark  
24.                         + "</span>")  
25.             }  
26.         } else {  
27.             for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) {  
28.                 if( j == totalCount){  
29.                     break;       // 当遍历到最后一条记录时，跳出循环  
30.                 }  
31.                 $(".li-tag").eq(k).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>")  
32.                 .append("<span class='col2'>" + parseInt(j + 1)  
33.                         + "</span>").append("<span class='col3'>" + dataRoot[j].mobile  
34.                         + "</span>").append("<span class='col4'>" + dataRoot[j].province  
35.                         + "</span>").append("<span class='col5'>" + dataRoot[j].gateway  
36.                         + "</span>").append("<span class='col6'>" + dataRoot[j].insertTime  
37.                         + "</span>").append("<span class='col7'>" + dataRoot[j].remark  
38.                         + "</span>")  
39.             }  
40.         }  
41.         $(".page-count").text(pageTotal);  
42.     })  
43. }  
44. function getPage() {  
45.     $.getJSON("blackList.ce", function(data) {  
46.                 pn = 1;  
47.                 var totalCount = data.totalCount; // 总记录数  
48.                 var pageSize = 10; // 每页显示几条记录  
49.                 var pageTotal = Math.ceil(totalCount / pageSize); // 总页数  
50.                 $("#next").click(function() {  
51.                             if (pn == pageTotal) {  
52.                                 alert("后面没有了");  
53.                                 pn = pageTotal;  
54.                             } else {  
55.                                 pn++;  
56.                                 gotoPage(pn);  
57.                             }  
58.                         });  
59.                 $("#prev").click(function() {  
60.                             if (pn == 1) {  
61.                                 alert("前面没有了");  
62.                                 pn = 1;  
63.                             } else {  
64.                                 pn--;  
65.                                 gotoPage(pn);  
66.                             }  
67.                         })  
68.                 $("#firstPage").click(function() {  
69.                             pn = 1;  
70.                             gotoPage(pn);  
71.                         });  
72.                 $("#lastPage").click(function() {  
73.                             pn = pageTotal;  
74.                             gotoPage(pn);  
75.                         });  
76.                 $("#page-jump").click(function(){  
77.                     if($(".page-num").val()  <= pageTotal && $(".page-num").val() != ''){  
78.                         pn = $(".page-num").val();  
79.                         gotoPage(pn);  
80.                     }else{  
81.                         alert("您输入的页码有误！");  
82.                         $(".page-num").val('').focus();  
83.                     }  
84.                 })  
85.                 $("#firstPage").trigger("click");  
86.                   
87.             })  
88. }  
89. function gotoPage(pn) {  
90.     // alert(pn);  
91.     $(".current-page").text(pn);  
92.     getJSONData(pn)  
93. }  
94.   
95. $(function() {  
96.     getPage();  
97. })  

转