springMVC+ajax分页查询

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

也方便后人参考。

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

下面先讲页面,页面js代码如下:

[javascript] view plain copy print?

在CODE上查看代码片

派生到我的代码片

  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" onclick="GoToFirstPage()" id="aFirstPage" >首页</a> '  
  29.             +'<a href="javascript:void" onclick="GoToPrePage()" id="aPrePage"  >上一页</a>  '  
  30.             +'<a href="javascript:void" onclick="GoToNextPage()" id="aNextPage" >下一页</a>  '  
  31.             +'<a href="javascript:void" onclick="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?

在CODE上查看代码片

派生到我的代码片

  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层:

  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》

原文地址:https://www.cnblogs.com/xiadongqing

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


这篇文章主要介绍了spring的事务传播属性REQUIRED_NESTED的原理介绍,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。传统事务中回滚点的使...
今天小编给大家分享的是一文解析spring中事务的传播机制,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获...
这篇文章主要介绍了SpringCloudAlibaba和SpringCloud有什么区别,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。Spring Cloud Netfli...
本篇文章和大家了解一下SpringCloud整合XXL-Job的几个步骤。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。第一步:整合pom文件,在S...
本篇文章和大家了解一下Spring延迟初始化会遇到什么问题。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。List 坑列表 = new ArrayList(2);...
这篇文章主要介绍了怎么使用Spring提供的不同缓存注解实现缓存的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇...
本篇内容主要讲解“Spring中的@Autowired和@Resource注解怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学...
今天小编给大家分享一下SpringSecurity怎么定义多个过滤器链的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家
这篇文章主要介绍“Spring的@Conditional注解怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Spring的@Con...
这篇文章主要介绍了SpringCloudGateway的熔断限流怎么配置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇SpringCloud&nb...
今天小编给大家分享一下怎么使用Spring解决循环依赖问题的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考
这篇文章主要介绍“Spring事务及传播机制的原理及应用方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Sp...
这篇“SpringCloudAlibaba框架实例应用分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价
本篇内容主要讲解“SpringBoot中怎么使用SpringMVC”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习...
这篇文章主要介绍“SpringMVC适配器模式作用范围是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“SpringMVC
这篇“导入SpringCloud依赖失败如何解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家...
这篇文章主要讲解了“SpringMVC核心DispatcherServlet处理流程是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来
今天小编给大家分享一下SpringMVCHttpMessageConverter消息转换器怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以...
这篇文章主要介绍“Spring框架实现依赖注入的原理是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Spring框架...
本篇内容介绍了“Spring单元测试控制Bean注入的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下