springMVC+ajax分页查询

项目用到ajax技术的查询，查询结果很多时候要分页展示。这两天摸索了一下，在这里做一总结，方便自己随时查看，

也方便后人参考。

这里的顺序遵从从前台页面到后台控制器，业务层，Dao层，Mapper

下面先讲页面，页面js代码如下：

[javascript] view plain copy print?

1. <span style="font-size:14px;">/* 全局变量 */  
2. var userCount;//符合查找条件的用户总页数，分页参考  
3. var pageIndex = 0;//当前页，默认为0  
4. var pageSize = 8;//每页显示个数为8  
5.   
6. //按条件查找用户  
7. function searchUser(index,size) {  
8.     var findTerm = $("#serchTerm").val();  
9.     var provinceId = $('#province').val();  
10.     var cityId = $('#city').val();  
11.     $.ajax({  
12.         type : "POST",  
13.         url : "user/findContactsAjax",  
14.         cache : false,  
15.         data : {  
16.             provinceId : provinceId,  
17.             cityId : cityId,  
18.             pageIndex:index,  
19.             pageSize:size  
20.         },  
21.         async : true,  
22.         error : function() {  
23.             alert("网络异常！");  
24.         },  
25.         success : function(data) {  
26.         <span style="white-space:pre">    </span>userCount=Math.ceil(data[0].userCount/8);<span style="white-space:pre">                                                  </span>var page='<div id="userPage" align="center" ><font size="2">共'  
27.             +userCount+'页</font> <font size="2">第'  
28.             +(pageIndex+1)+'页</font> <a href="javascript:void" οnclick="GoToFirstPage()" id="aFirstPage" >首页</a> '  
29.             +'<a href="javascript:void" οnclick="GoToPrePage()" id="aPrePage"  >上一页</a>  '  
30.             +'<a href="javascript:void" οnclick="GoToNextPage()" id="aNextPage" >下一页</a>  '  
31.             +'<a href="javascript:void" οnclick="GoToEndPage()" id="aEndPage" >尾页</a>  ';  
32.             page+='</div>';  
33.             $("#serchResult").append(page);  
34.             document.getElementById("dltitle").innerHTML = "查找结果如下";  
35.             }  
36.         }  
37.     });  
38. }  
39. //首页  
40. function GoToFirstPage() {  
41.     pageIndex = 0;  
42.     searchUser( pageIndex, pageSize);  
43. }  
44. //前一页  
45. function GoToPrePage() {  
46.     pageIndex -= 1;  
47.     pageIndex = pageIndex >= 0 ? pageIndex : 0;  
48.     searchUser( pageIndex, pageSize);  
49. }  
50. //后一页  
51. function GoToNextPage() {  
52.     if (pageIndex + 1 < userCount) {  
53.         pageIndex += 1;  
54.     }  
55.         searchUser( pageIndex, pageSize);  
56. }  
57. //尾页  
58. function GoToEndPage() {  
59.     pageIndex = userCount - 1;  
60.     searchUser( pageIndex, pageSize);  
61. }</span>  

控制层代码如下：

[javascript] view plain copy print?

1. @RequestMapping("findContactsAjax")  
2.     public @ResponseBody  
3.     Map<String, Object> findContactAjax(String provinceId,String cityId,String pageIndex,String pageSize) {  
4.       
5.     List<User> listUsers = userDao.selectUserByProvinceAndCity(provinceId, cityId,pageIndex,pageSize)  
6.         }  
7.           
8.         map.put("user", listUsers);  
9.         return map;  
10.     }  

Dao层：

[java] view plain copy print?

1. List<User> selectUserByProvinceAndCity(@Param("provinceId") Integer provinceId, @Param("cityId") Integer cityId,  
2. @Param("pageIndex") Integer pageIndex,@Param("pageSize") Integer pageSize);  

mapper文件：

[html] view plain copy print?

1. <select id="selectUserByProvinceAndCity" resultMap="BaseResultMap">  
2.         SELECT *,  
3.         (SELECT  COUNT(*) FROM user_user_t    
4.         province_id=#{provinceId}     
5.          AND   
6.         city_id=#{cityId}) AS userCount  
7.         FROM user_user_t  
8.         province_id=#{provinceId}     
9.          AND   
10.         city_id=#{cityId}  
11.         LIMIT #{pageIndex},#{pageSize}  
12.     </select>  

 

User实体

[java] view plain copy print?

1. 1. public class User {  
   2.     private Integer userId;  
   3.     private String userName;  
   4.     private Integer provinceId;  
   5.     private Integer cityId;  
   6.     private Integer userCount;//满足查询条件的用户数目，作为分页的依据  
   7.     } 

       

2. 《转：http://blog.csdn.net/gisredevelopment/article/details/39084945》