您的位置: 首页  >  文章  >  SpringMVC -jquery实现分页

SpringMVC -jquery实现分页

分类: 文章 • 2023-02-26 00:27:42

SpringMVC -jquery实现分页

SpringMVC -jquery实现分页

关键类的代码：

package:utils:

SpringUtil.java  

通过jdbcTemplate连接oracle数据库

[java] view plain copy
  1. package com.utils;  
  2.   
  3. import org.springframework.context.ApplicationContext;  
  4. import org.springframework.context.support.ClassPathXmlApplicationContext;  
  5.   
  6. /** 
  7.  * @author lyx 
  8.  *   
  9.  * 2015-8-18下午3:53:19 
  10.  * 
  11.  *com.utils.SpringUtil 
  12.  *  TODO 
  13.  */  
  14. public class SpringUtil {  
  15.   
  16.     private static ApplicationContext ctx =new ClassPathXmlApplicationContext("springmvc-servlet.xml");  
  17.       
  18.       
  19.     public static Object getBean(String beanId)  
  20.     {  
  21.         return ctx.getBean(beanId);  
  22.     }  
  23. }  

ResultUtil.java 

实现页面和控制层传递数据的交互类

[java] view plain copy
  1. package com.utils;  
  2.   
  3. import java.util.HashMap;  
  4. import java.util.Map;  
  5.   
  6. import net.sf.json.JSONObject;  
  7.   
  8.   
  9. /** 
  10.  * @author lyx 
  11.  *   
  12.  * 2015-8-18下午1:39:40 
  13.  * 
  14.  *com.yr.utils.ResultUtil 
  15.  *  TODO 结果工具类 
  16.  */  
  17. public class ResultUtil {  
  18.   
  19.         /** 
  20.          * 保存json对象 
  21.          */  
  22.         private Map<String,Object> results;  
  23.           
  24.         //---- key值：          
  25.           
  26.         private static final String MSG="msg";  
  27.         private static final String SUCCESS="success";  
  28.         /** 
  29.          * 单独对象 
  30.          */  
  31.         private static final String OBJ ="obj";  
  32.         /** 
  33.          * 列表对象 
  34.          */  
  35.         private static final String ROWS="rows";  
  36.           
  37.         private static final String TOTAL ="total";  
  38.           
  39.         private static final String STATUS="status";  
  40.   
  41.         private static final String SIZE="size";  
  42.           
  43.           
  44.         /** 
  45.          *构造函数初始化  
  46.          */  
  47.         public ResultUtil() {  
  48.             this.results = new HashMap<String,Object>();  
  49.             //默认值  
  50.             this.results.put(SUCCESS, true);  
  51.         }  
  52.   
  53.         public Map<String, Object> getResult() {  
  54.             return results;  
  55.         }  
  56.           
  57.         public void setResult(Map<String, Object> results) {  
  58.             this.results = results;  
  59.         }  
  60.           
  61.         public  String getMsg() {  
  62.             return (String) results.get(MSG);  
  63.         }  
  64.   
  65.         public  boolean getSuccess() {  
  66.             return (Boolean) results.get(SUCCESS);  
  67.         }  
  68.   
  69.         public  String getObj() {  
  70.             return OBJ;  
  71.         }  
  72.   
  73.         public  void setRows(Object rows) {  
  74.              this.results.put(ROWS,rows);  
  75.         }  
  76.   
  77.         public  void setTotal(Integer total) {  
  78.             this.results.put(TOTAL, total);  
  79.         }  
  80.           
  81.         public  void setSize(Integer szie) {  
  82.             this.results.put(SIZE, szie);  
  83.         }  
  84.   
  85.           
  86.         /** 
  87.          * @param key 
  88.          * @param value 
  89.          * 自定义添加属性标识 
  90.          */  
  91.         public void setProperty(String key,Object value)  
  92.         {  
  93.             try {  
  94.                 this.results.put(key, value);  
  95.             } catch (Exception e) {  
  96.                 // TODO: handle exception  
  97.                 //logger.error("出错时：key:"+key+",value："+value+",Json时错误是：",e);  
  98.             }  
  99.         }  
  100.           
  101.           
  102.           
  103.         public void setStatus(String status)  
  104.         {  
  105.             setProperty(STATUS, status);  
  106.         }  
  107.       
  108.           
  109.         public void setSuccess(boolean success)  
  110.         {  
  111.             setProperty(SUCCESS, success);  
  112.         }  
  113.           
  114.         public void setMsg(String Msg)  
  115.         {  
  116.             setProperty(MSG, Msg);  
  117.         }  
  118.           
  119.         public void setTotal(int size)  
  120.         {  
  121.             setProperty(TOTAL, size);  
  122.         }  
  123.           
  124.         public void setSize(int size)  
  125.         {  
  126.             setProperty(SIZE, size);  
  127.         }  
  128.           
  129.         public void setData(String data)  
  130.         {  
  131.             setProperty(ROWS, data);  
  132.         }  
  133.           
  134.         public void setObj(Object obj)  
  135.         {  
  136.             setProperty(OBJ, obj);  
  137.         }  
  138.           
  139.           
  140.           
  141.         public String toJsonString()  
  142.         {  
  143.             JSONObject obj =new JSONObject();  
  144.             obj.put("data", this.results);  
  145.             return obj.toString();  
  146.         }  
  147.           
  148.         public static void main(String[] args)  
  149.         {  
  150.             ResultUtil utils =new ResultUtil();  
  151.             System.out.println(utils.toJsonString());  
  152.         }  
  153.           
  154. }  

UserDaoImpl.java

方法的实现类

[java] view plain copy
  1. package com.dao.Impl;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5. import java.util.Map;  
  6.   
  7. import org.springframework.jdbc.core.JdbcTemplate;  
  8.   
  9. import com.dao.UserDao;  
  10. import com.utils.SpringUtil;  
  11.   
  12. public class UserDaoImpl implements UserDao {  
  13.   
  14.     private JdbcTemplate jdbc =(JdbcTemplate) SpringUtil.getBean("jdbcTemplate");  
  15.       
  16.     public List<Map<String,Object>> queryAllInfo(int currentPage,int limitPage) {  
  17.         // TODO Auto-generated method stub  
  18.           
  19.         String sql="SELECT * FROM (SELECT A.*, ROWNUM RN FROM (select * from LYX.MEMBERUSER m order by m.memberid Asc) A WHERE ROWNUM <="+(currentPage*limitPage)+")WHERE RN >"+((currentPage-1)*limitPage)+"";  
  20.           
  21.         List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();  
  22.           
  23.         list = jdbc.queryForList(sql);  
  24.           
  25.         return list;  
  26.     }  
  27.   
  28.       
  29.     public int totalCount() {  
  30.           
  31.         String sql="select count(*) from LYX.MEMBERUSER";  
  32.           
  33.         return jdbc.queryForInt(sql);  
  34.     }  
  35.   
  36. }  

UserController.java

控制层

[java] view plain copy
  1. package com.controller;  
  2.   
  3. import java.util.List;  
  4. import java.util.Map;  
  5.   
  6. import javax.servlet.http.HttpServletRequest;  
  7. import javax.servlet.http.HttpServletResponse;  
  8.   
  9. import org.springframework.stereotype.Controller;  
  10. import org.springframework.web.bind.annotation.RequestMapping;  
  11. import org.springframework.web.bind.annotation.ResponseBody;  
  12.   
  13. import com.utils.ResultUtil;  
  14.   
  15. import service.impl.UserServiceImpl;  
  16.   
  17. /** 
  18.  * @author lyx 
  19.  *   
  20.  * 2015-8-19上午8:53:52 
  21.  * 
  22.  *com.controller.UserController 
  23.  *  TODO 
  24.  */  
  25. @Controller  
  26. @RequestMapping("/user")  
  27. public class UserController {  
  28.       
  29.      private UserServiceImpl service;   
  30.       
  31.     @RequestMapping("/queryAllInfo")  
  32.     @ResponseBody  
  33.     public Map<String,Object> queryAllInfo(HttpServletRequest request,HttpServletResponse response)  
  34.     {  
  35.         service = new UserServiceImpl();  
  36.           
  37.         ResultUtil result =new ResultUtil();  
  38.           
  39.         //数据库总的数据总条数  
  40.         int totalRecords =service.totalCount();  
  41.         //当前页  
  42.         int currentPage=1;  
  43.         //每页多少条数据  
  44.         int limitPage=5;  
  45.           
  46.         //获得当前页 和 每页条数  
  47.         if(request.getParameter("currentPage")!=null)  
  48.             currentPage=Integer.valueOf(request.getParameter("currentPage"));  
  49.         if(request.getParameter("limitPage")!=null)  
  50.             limitPage =Integer.valueOf(request.getParameter("limitPage"));  
  51.           
  52.         //总页数  
  53.         int totalpage;  
  54.         if(totalRecords<=limitPage)  
  55.         {  
  56.             totalpage=1;  
  57.         }else if((totalRecords%limitPage)==0)  
  58.         {  
  59.             totalpage=totalRecords/limitPage;  
  60.         }else  
  61.         {  
  62.             totalpage=(totalRecords/limitPage)+1;  
  63.         }  
  64.       
  65.          //根据当前页和每页条数获取结果集  
  66.         List<Map<String,Object>> list = service.queryAllInfo(currentPage,limitPage);  
  67.           
  68.           
  69.         if(list.size()>0)  
  70.         {  
  71.             //数据集  
  72.             result.setRows(list);  
  73.             //总页数  
  74.             result.setTotal(totalpage);  
  75.             //总记录数  
  76.             result.setSize(totalRecords);  
  77.             result.setMsg("查询成功！");  
  78.         }else  
  79.         {  
  80.             result.setSuccess(false);  
  81.             result.setMsg("查询失败！");  
  82.         }  
  83.           
  84.         return result.getResult();  
  85.     }  
  86.       
  87. }  

springmvc-servlet.xml

springmvc配置文件

[java] view plain copy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"    
  3.   xmlns:context="http://www.springframework.org/schema/context"    
  4.  xmlns:p="http://www.springframework.org/schema/p"    
  5.  xmlns:mvc="http://www.springframework.org/schema/mvc"    
  6.  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    
  7.  xsi:schemaLocation="http://www.springframework.org/schema/beans    
  8.       http://www.springframework.org/schema/beans/spring-beans-3.0.xsd    
  9.       http://www.springframework.org/schema/context    
  10.       http://www.springframework.org/schema/context/spring-context.xsd    
  11.       http://www.springframework.org/schema/mvc    
  12.       http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">  
  13.         
  14.   <!-- springMVC比较详细注解 -->  
  15.     
  16.       
  17.   <!-- 基本配置  -begin-->  
  18.     
  19.       <!-- 自动注入 -->  
  20.       <context:annotation-config></context:annotation-config>  
  21.       <!-- 自动扫描包  组件扫描-->  
  22.       <context:component-scan base-package="com"></context:component-scan>  
  23.         
  24.       <!-- 注释驱动 -->  
  25.       <mvc:annotation-driven/>  
  26.         
  27.       <!-- 配置不用DispatcherServlet 拦截的路径 -->  
  28.       <mvc:resources location="/res/" mapping="/res/**"/>   
  29.       <!-- 默认分发处理器不会拦截静态资源 -->  
  30.      <!--  <mvc:default-servlet-handler/> -->  
  31.         
  32.         
  33.       <!-- 默认地址栏访问跳转到首页 -->  
  34.    <!--   <mvc:view-controller path="/" view-name="forward:/index"/>  -->  
  35.       <!-- 也可以利用<mvc:view-controller/>配置错误页面的跳转 -->  
  36.         
  37.       <!-- 采用SpringMVC自带的JSON转换工具，支持@ResponseBody注解 -->  
  38.      <bean id="annotationMethodHandlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
  39.         <property name="messageConverters">  
  40.             <list>  
  41.                 <!-- 解析JSON数据，将json转换成java对象  
  42.                 避免IE执行AJAX时,返回JSON出现下载文件 -->  
  43.                 <bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">  
  44.                     <property name="supportedMediaTypes">  
  45.                         <list>  
  46.                             <value>text/html;charset=UTF-8</value>  
  47.                         </list>  
  48.                     </property>  
  49.                 </bean>  
  50.                       
  51.             </list>  
  52.         </property>  
  53.       </bean>   
  54.          
  55.         <!-- 配置多请求数据类型，如json xml -->  
  56.   <!--   <bean id="annotationMethodHandlerAdapter"  
  57.           class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
  58.         <property name="messageConverters">  
  59.             <list>  
  60.                 解析json请求数据，将json转换为java对象  
  61.                 <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">  
  62.                     <property name="supportedMediaTypes">  
  63.                         <list>  
  64.                             <value>text/html;charset=UTF-8</value>  
  65.                         </list>  
  66.                     </property>  
  67.                 </bean>  
  68.                 可以增加其他数据类型,参考spring的API  
  69.             </list>  
  70.         </property>  
  71.     </bean>  
  72.        -->  
  73.         
  74.         
  75.       <!-- 视图解析器 -->  
  76.        <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver" >  
  77.          <property name="prefix" value="/"></property>  
  78.          <property name="suffix" value=".jsp"></property>  
  79.       </bean>   
  80.         
  81.       
  82.     <!-- 基本配置  -end-->  
  83.       
  84.       
  85.     <!-- 功能配置 -begin-->  
  86.           
  87.         <!-- 引入项目配置文件 -->  
  88.         <!-- 配置springJDBC Template -->  
  89.         <bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">  
  90.             <property name="locations">  
  91.                 <list>  
  92.                     <value>classpath:dbconfig.properties</value>  
  93.                 </list>  
  94.             </property>  
  95.         </bean>   
  96.           
  97.           
  98.          <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">  
  99.                 <property name="url" value="${url}"></property>  
  100.                 <property name="driverClassName"  value="${driverClassName}"></property>  
  101.                 <property name="username" value="${username}"></property>  
  102.                 <property name="password" value="${password}"></property>  
  103.             </bean>  
  104.                 <!-- jdbcTemplate -->  
  105.             <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate" >  
  106.                 <property name="dataSource" ref="dataSource">  
  107.                       
  108.                 </property>  
  109.             </bean>   
  110.     
  111.       
  112.          <!-- 文件上传配置 -->  
  113.       <!--    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
  114.             <property name="defaultEncoding" value="UTF-8"></property> 默认编码  
  115.             <property name="maxUploadSize" value="10000000"></property> 上传文件大小  
  116.          </bean> -->  
  117.            
  118.            
  119.           <!-- 拦截器 -->  
  120.           <!--  
  121.         <mvc:interceptors>  
  122.              <mvc:interceptor>   
  123.                 拦截全部地址  
  124.                 <mvc:mapping path="/**"/>    
  125.                 登录拦截类  
  126.                 <bean id="loginInterceptor" class="com.sgcc.uds.fs.config.web.interceptor.LoginInterceptor">  
  127.                 </bean>  
  128.              </mvc:interceptor>     
  129.         </mvc:interceptors>  
  130.         -->  
  131.           
  132.         <!-- 异常 -->  
  133.         <!--    
  134.           <bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">    
  135.           <property name="exceptionMappings">    
  136.             <props>    
  137.                 登录失败异常类  
  138.               <prop key="com.sgcc.uds.fs.config.web.interceptor.UnLoginException">redirect:/toLogin</prop>    
  139.             </props>    
  140.           </property>    
  141.         </bean>      
  142.         -->  
  143.          
  144.    <!-- 功能配置 -end-->  
  145.        
  146. </beans>  

index.jsp页面

[java] view plain copy
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. request.setAttribute("home", path);  
  6. %>  
  7.   
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  9. <html>  
  10.   <head>  
  11.     <base href="<%=basePath%>">  
  12.       
  13.     <title>My JSP 'index.jsp' starting page</title>  
  14.     <meta http-equiv="pragma" content="no-cache">  
  15.     <meta http-equiv="cache-control" content="no-cache">  
  16.     <meta http-equiv="expires" content="0">      
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  18.     <meta http-equiv="description" content="This is my page">  
  19.     <!--  
  20.     <link rel="stylesheet" type="text/css" href="styles.css">  
  21.     -->  
  22.     <link rel="stylesheet" href="${home}/res/css/bootstrap.min.css" type="text/css"></link>  
  23.     <link rel="stylesheet" href="${home}/res/css/allStyle.css" type="text/css"></link>  
  24.       
  25.     <style type="text/css">  
  26.       
  27.     .userTable{  
  28.           
  29.         font-size: 20px;  
  30.     }  
  31.       
  32.     </style>  
  33.       
  34.     <script type="text/javascript">  
  35.         var home ="${home}";  
  36.     </script>   
  37.   </head>  
  38.     
  39.   <body>  
  40.     
  41.    <h2 class="sub-header">用户列表</h2>   
  42.      
  43.     <!--  <div class="addbtn" >  
  44.     <button class="btn  btn-warning" data-toggle="modal"  
  45.             data-target="#addModal">增加用户</button>  
  46.     </div>  -->  
  47.       
  48.     <!-- 信息列表 -->  
  49.     <div class="table-responsive">  
  50.     <!--  -->  
  51.         <table class="userTable table table-striped table-bordered table-hover" id="userListTable">  
  52.             <thead>  
  53.                 <tr>  
  54.                     <th>MEMBERNAME</th>  
  55.                     <th>ACCOUNTNUMBER</th>  
  56.                     <th>AGE</th>  
  57.                     <th>GENDER</th>  
  58.                     <th>BIRTHDAY</th>  
  59.                     <th>MEMBER_LABEL</th>  
  60.                 </tr>  
  61.             </thead>  
  62.             <tbody>  
  63.               
  64.             </tbody>  
  65.               
  66.         </table>  
  67.           
  68.         <!-- 分页 -->  
  69.          <ul id="pages" class="pages"></ul>  
  70.           
  71.         共 <input type="text" id="pageSize" value="5" readonly="readonly"> 条记录 /当前页:<input type="text" id="currentPage" readonly="readonly" class="currentPage">   
  72.     </div>  
  73.     
  74.      
  75.      
  76.     <script type="text/javascript" src="${home}/res/js/jquery-1.11.3.min.js"></script>  
  77.     <script type="text/javascript" src="${home}/res/js/bootstrap.min.js"></script>  
  78.     <%-- <script type="text/javascript" src="${home}/res/js/jquery.1.7.2.min.js"></script> --%>  
  79.     <script type="text/javascript" src="${home}/res/js/docs.min.js"></script>  
  80.     <script type="text/javascript"  
  81.         src="${home}/res/js/ie10-viewport-bug-workaround.js"></script>  
  82.     <script type="text/javascript" src="${home}/res/js/memberUser.js"></script>  
  83.       
  84.     <!-- 分页  -->  
  85.     <script src="${home}/res/js/page/jquery.twbsPagination.js" type="text/javascript"></script>  
  86.     <%-- <script src="${home}/js/page/zzsc.js" type="text/javascript"></script> --%>  
  87.   </body>  
  88. </html>  

memberUser.js

[java] view plain copy
  1. //加载数据  
  2.     $(document).ready(function() {  
  3.           
  4.         var param={};  
  5.         param.currentPage=1;  
  6.         param.limitPage=2;  
  7.           
  8.         $.post(home+"/user/queryAllInfo",null,  
  9.             function(result)  
  10.             {  
  11.                 if(result !=null && result.success)  
  12.                     {  
  13.                         var obj =result.rows;  
  14.                           
  15.                         //总的页数是否大于10 如果大于则显示10页，否则显示总的页数  
  16.                         var visiblePage=result.total>10?10:result.total;  
  17.                           
  18.                         for ( var i = 0; i < obj.length; i++) {  
  19.                               
  20.                             var user =obj[i];  
  21.                               
  22.                             var tr = "<tr><td>"  
  23.                                 + user.MEMBERNAME  
  24.                                 + " </td>  <td>"  
  25.                                 + user.ACCOUNTNUMBER  
  26.                                 + " </td>  <td>"  
  27.                                 + user.AGE  
  28.                                 + " </td>  <td>"  
  29.                                 + user.GENDER  
  30.                                 + " </td>  <td>"      
  31.                                 + user.BIRTHDAY  
  32.                                 + " </td>  <td>"                          
  33.                                 + user.MEMBER_LABEL  
  34.                                 + " </td>";  
  35.                               
  36.                             $(".userTable").append(tr);  
  37.                               
  38.                               
  39.                             //--------------分页  
  40.                              $('#pages').twbsPagination({  
  41.                                  //总共多少页  
  42.                                     totalPages: result.total,  
  43.                                  //页面显示几页  
  44.                                     visiblePages:visiblePage,  
  45.                                     version: '1.1',  
  46.                                    // href:home + "/user/queryAllInfo",  
  47.                                     onPageClick: function (event, page) {  
  48.                                         //调用分页函数  
  49.                                         setPage(page);  
  50.                                     }  
  51.                                 });  
  52.                         }  
  53.                           
  54.                     }else  
  55.                         {  
  56.                         alert(result.msg);  
  57.                         }  
  58.               
  59.         },"json"  
  60.         );  
  61.           
  62.     });    
  63.       
  64.     //实现分页  
  65.     function setPage(currentPage)  
  66.     {  
  67.         var param={};  
  68.         param.currentPage=currentPage;  
  69.         //每页几条数据  
  70.         param.limitPage=5;  
  71.           
  72.       
  73.           
  74.         $.post(home+"/user/queryAllInfo",param,  
  75.             function(result)  
  76.             {  
  77.                 if(result !=null && result.success)  
  78.                     {  
  79.                       
  80.                         var obj =result.rows;  
  81.                           
  82.                         $("#pageSize").val(result.size);  
  83.                           
  84.                         //清空上一次查询表中数据  
  85.                         $('.userTable tbody').empty();  
  86.                           
  87.                         for ( var i = 0; i < obj.length; i++) {  
  88.                               
  89.                             var user =obj[i];  
  90.                               
  91.                             var tr = "<tr><td>"  
  92.                                 + user.MEMBERNAME  
  93.                                 + " </td>  <td>"  
  94.                                 + user.ACCOUNTNUMBER  
  95.                                 + " </td>  <td>"  
  96.                                 + user.AGE  
  97.                                 + " </td>  <td>"  
  98.                                 + user.GENDER  
  99.                                 + " </td>  <td>"      
  100.                                 + user.BIRTHDAY  
  101.                                 + " </td>  <td>"                          
  102.                                 + user.MEMBER_LABEL  
  103.                                 + " </td>";  
  104.                               
  105.                             $(".userTable").append(tr);  
  106.                               
  107.                         }  
  108.                           
  109.                     }else  
  110.                         {  
  111.                         alert(result.msg);  
  112.                         }  
  113.               
  114.         },"json"  
  115.         );  
  116.           
  117.     }  
  118.       
  119.       


项目源码：http://download.****.net/detail/u013147600/9024027
四种jQuery+bootstrap分页效果插件： http://download.****.net/detail/u013147600/902

相关推荐