zoukankan      html  css  js  c++  java
  • 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》
  • 相关阅读:
    基于C#.NET C/S架构的生产看板管理系统软件开发框架平台
    VS.NET后端框架,C#.NET开发的服务器端开发框架
    开源.NET开发架构.NET管理系统框架-原创作品
    开源.NET开发架构 .NET管理系统框架
    基于MVC架构的WebApi服务端开发框架核心优势|C/S框架网原创作品
    基于C#.NET三层架构物流运输管理系统(TMS)-C/S框架网原创作品
    C#Winform+SQL开发的基于C/S架构大型ERP系统
    MES系统框架及MES开源框架|C/S框架网软著产品
    C#.NET程序升级框架之软件版本自动升级系统
    原创C/S应用程序开发平台与.NET快速开发框架
  • 原文地址:https://www.cnblogs.com/xiadongqing/p/5299944.html
Copyright © 2011-2022 走看看