springMVC+ajax分页查询

时间：2023-02-08 06:00:00

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

也方便后人参考。

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

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

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

控制层代码如下：

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

Dao层：

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

mapper文件：

  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实体

    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. }
  1. 《转：http://blog.csdn.net/gisredevelopment/article/details/39084945》

相关文章