SpringMVC -jquery实现分页
关键类的代码:
package:utils:
SpringUtil.java
通过jdbcTemplate连接oracle数据库
- package com.utils;
- import org.springframework.context.ApplicationContext;
- import org.springframework.context.support.ClassPathXmlApplicationContext;
- /**
- * @author lyx
- *
- * 2015-8-18下午3:53:19
- *
- *com.utils.SpringUtil
- * TODO
- */
- public class SpringUtil {
- private static ApplicationContext ctx =new ClassPathXmlApplicationContext("springmvc-servlet.xml");
- public static Object getBean(String beanId)
- {
- return ctx.getBean(beanId);
- }
- }
ResultUtil.java
实现页面和控制层传递数据的交互类
- package com.utils;
- import java.util.HashMap;
- import java.util.Map;
- import net.sf.json.JSONObject;
- /**
- * @author lyx
- *
- * 2015-8-18下午1:39:40
- *
- *com.yr.utils.ResultUtil
- * TODO 结果工具类
- */
- public class ResultUtil {
- /**
- * 保存json对象
- */
- private Map<String,Object> results;
- //---- key值:
- private static final String MSG="msg";
- private static final String SUCCESS="success";
- /**
- * 单独对象
- */
- private static final String OBJ ="obj";
- /**
- * 列表对象
- */
- private static final String ROWS="rows";
- private static final String TOTAL ="total";
- private static final String STATUS="status";
- private static final String SIZE="size";
- /**
- *构造函数初始化
- */
- public ResultUtil() {
- this.results = new HashMap<String,Object>();
- //默认值
- this.results.put(SUCCESS, true);
- }
- public Map<String, Object> getResult() {
- return results;
- }
- public void setResult(Map<String, Object> results) {
- this.results = results;
- }
- public String getMsg() {
- return (String) results.get(MSG);
- }
- public boolean getSuccess() {
- return (Boolean) results.get(SUCCESS);
- }
- public String getObj() {
- return OBJ;
- }
- public void setRows(Object rows) {
- this.results.put(ROWS,rows);
- }
- public void setTotal(Integer total) {
- this.results.put(TOTAL, total);
- }
- public void setSize(Integer szie) {
- this.results.put(SIZE, szie);
- }
- /**
- * @param key
- * @param value
- * 自定义添加属性标识
- */
- public void setProperty(String key,Object value)
- {
- try {
- this.results.put(key, value);
- } catch (Exception e) {
- // TODO: handle exception
- //logger.error("出错时:key:"+key+",value:"+value+",Json时错误是:",e);
- }
- }
- public void setStatus(String status)
- {
- setProperty(STATUS, status);
- }
- public void setSuccess(boolean success)
- {
- setProperty(SUCCESS, success);
- }
- public void setMsg(String Msg)
- {
- setProperty(MSG, Msg);
- }
- public void setTotal(int size)
- {
- setProperty(TOTAL, size);
- }
- public void setSize(int size)
- {
- setProperty(SIZE, size);
- }
- public void setData(String data)
- {
- setProperty(ROWS, data);
- }
- public void setObj(Object obj)
- {
- setProperty(OBJ, obj);
- }
- public String toJsonString()
- {
- JSONObject obj =new JSONObject();
- obj.put("data", this.results);
- return obj.toString();
- }
- public static void main(String[] args)
- {
- ResultUtil utils =new ResultUtil();
- System.out.println(utils.toJsonString());
- }
- }
UserDaoImpl.java
方法的实现类
- package com.dao.Impl;
- import java.util.ArrayList;
- import java.util.List;
- import java.util.Map;
- import org.springframework.jdbc.core.JdbcTemplate;
- import com.dao.UserDao;
- import com.utils.SpringUtil;
- public class UserDaoImpl implements UserDao {
- private JdbcTemplate jdbc =(JdbcTemplate) SpringUtil.getBean("jdbcTemplate");
- public List<Map<String,Object>> queryAllInfo(int currentPage,int limitPage) {
- // TODO Auto-generated method stub
- 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)+"";
- List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();
- list = jdbc.queryForList(sql);
- return list;
- }
- public int totalCount() {
- String sql="select count(*) from LYX.MEMBERUSER";
- return jdbc.queryForInt(sql);
- }
- }
UserController.java
控制层
- package com.controller;
- import java.util.List;
- import java.util.Map;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import org.springframework.stereotype.Controller;
- import org.springframework.web.bind.annotation.RequestMapping;
- import org.springframework.web.bind.annotation.ResponseBody;
- import com.utils.ResultUtil;
- import service.impl.UserServiceImpl;
- /**
- * @author lyx
- *
- * 2015-8-19上午8:53:52
- *
- *com.controller.UserController
- * TODO
- */
- @Controller
- @RequestMapping("/user")
- public class UserController {
- private UserServiceImpl service;
- @RequestMapping("/queryAllInfo")
- @ResponseBody
- public Map<String,Object> queryAllInfo(HttpServletRequest request,HttpServletResponse response)
- {
- service = new UserServiceImpl();
- ResultUtil result =new ResultUtil();
- //数据库总的数据总条数
- int totalRecords =service.totalCount();
- //当前页
- int currentPage=1;
- //每页多少条数据
- int limitPage=5;
- //获得当前页 和 每页条数
- if(request.getParameter("currentPage")!=null)
- currentPage=Integer.valueOf(request.getParameter("currentPage"));
- if(request.getParameter("limitPage")!=null)
- limitPage =Integer.valueOf(request.getParameter("limitPage"));
- //总页数
- int totalpage;
- if(totalRecords<=limitPage)
- {
- totalpage=1;
- }else if((totalRecords%limitPage)==0)
- {
- totalpage=totalRecords/limitPage;
- }else
- {
- totalpage=(totalRecords/limitPage)+1;
- }
- //根据当前页和每页条数获取结果集
- List<Map<String,Object>> list = service.queryAllInfo(currentPage,limitPage);
- if(list.size()>0)
- {
- //数据集
- result.setRows(list);
- //总页数
- result.setTotal(totalpage);
- //总记录数
- result.setSize(totalRecords);
- result.setMsg("查询成功!");
- }else
- {
- result.setSuccess(false);
- result.setMsg("查询失败!");
- }
- return result.getResult();
- }
- }
springmvc-servlet.xml
springmvc配置文件
- <?xml version="1.0" encoding="UTF-8"?>
- <beans xmlns="http://www.springframework.org/schema/beans"
- xmlns:context="http://www.springframework.org/schema/context"
- xmlns:p="http://www.springframework.org/schema/p"
- xmlns:mvc="http://www.springframework.org/schema/mvc"
- xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://www.springframework.org/schema/beans
- http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
- http://www.springframework.org/schema/context
- http://www.springframework.org/schema/context/spring-context.xsd
- http://www.springframework.org/schema/mvc
- http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
- <!-- springMVC比较详细注解 -->
- <!-- 基本配置 -begin-->
- <!-- 自动注入 -->
- <context:annotation-config></context:annotation-config>
- <!-- 自动扫描包 组件扫描-->
- <context:component-scan base-package="com"></context:component-scan>
- <!-- 注释驱动 -->
- <mvc:annotation-driven/>
- <!-- 配置不用DispatcherServlet 拦截的路径 -->
- <mvc:resources location="/res/" mapping="/res/**"/>
- <!-- 默认分发处理器不会拦截静态资源 -->
- <!-- <mvc:default-servlet-handler/> -->
- <!-- 默认地址栏访问跳转到首页 -->
- <!-- <mvc:view-controller path="/" view-name="forward:/index"/> -->
- <!-- 也可以利用<mvc:view-controller/>配置错误页面的跳转 -->
- <!-- 采用SpringMVC自带的JSON转换工具,支持@ResponseBody注解 -->
- <bean id="annotationMethodHandlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
- <property name="messageConverters">
- <list>
- <!-- 解析JSON数据,将json转换成java对象
- 避免IE执行AJAX时,返回JSON出现下载文件 -->
- <bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
- <property name="supportedMediaTypes">
- <list>
- <value>text/html;charset=UTF-8</value>
- </list>
- </property>
- </bean>
- </list>
- </property>
- </bean>
- <!-- 配置多请求数据类型,如json xml -->
- <!-- <bean id="annotationMethodHandlerAdapter"
- class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
- <property name="messageConverters">
- <list>
- 解析json请求数据,将json转换为java对象
- <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
- <property name="supportedMediaTypes">
- <list>
- <value>text/html;charset=UTF-8</value>
- </list>
- </property>
- </bean>
- 可以增加其他数据类型,参考spring的API
- </list>
- </property>
- </bean>
- -->
- <!-- 视图解析器 -->
- <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver" >
- <property name="prefix" value="/"></property>
- <property name="suffix" value=".jsp"></property>
- </bean>
- <!-- 基本配置 -end-->
- <!-- 功能配置 -begin-->
- <!-- 引入项目配置文件 -->
- <!-- 配置springJDBC Template -->
- <bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
- <property name="locations">
- <list>
- <value>classpath:dbconfig.properties</value>
- </list>
- </property>
- </bean>
- <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
- <property name="url" value="${url}"></property>
- <property name="driverClassName" value="${driverClassName}"></property>
- <property name="username" value="${username}"></property>
- <property name="password" value="${password}"></property>
- </bean>
- <!-- jdbcTemplate -->
- <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate" >
- <property name="dataSource" ref="dataSource">
- </property>
- </bean>
- <!-- 文件上传配置 -->
- <!-- <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
- <property name="defaultEncoding" value="UTF-8"></property> 默认编码
- <property name="maxUploadSize" value="10000000"></property> 上传文件大小
- </bean> -->
- <!-- 拦截器 -->
- <!--
- <mvc:interceptors>
- <mvc:interceptor>
- 拦截全部地址
- <mvc:mapping path="/**"/>
- 登录拦截类
- <bean id="loginInterceptor" class="com.sgcc.uds.fs.config.web.interceptor.LoginInterceptor">
- </bean>
- </mvc:interceptor>
- </mvc:interceptors>
- -->
- <!-- 异常 -->
- <!--
- <bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
- <property name="exceptionMappings">
- <props>
- 登录失败异常类
- <prop key="com.sgcc.uds.fs.config.web.interceptor.UnLoginException">redirect:/toLogin</prop>
- </props>
- </property>
- </bean>
- -->
- <!-- 功能配置 -end-->
- </beans>
index.jsp页面
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- request.setAttribute("home", path);
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
- <title>My JSP 'index.jsp' starting page</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <!--
- <link rel="stylesheet" type="text/css" href="styles.css">
- -->
- <link rel="stylesheet" href="${home}/res/css/bootstrap.min.css" type="text/css"></link>
- <link rel="stylesheet" href="${home}/res/css/allStyle.css" type="text/css"></link>
- <style type="text/css">
- .userTable{
- font-size: 20px;
- }
- </style>
- <script type="text/javascript">
- var home ="${home}";
- </script>
- </head>
- <body>
- <h2 class="sub-header">用户列表</h2>
- <!-- <div class="addbtn" >
- <button class="btn btn-warning" data-toggle="modal"
- data-target="#addModal">增加用户</button>
- </div> -->
- <!-- 信息列表 -->
- <div class="table-responsive">
- <!-- -->
- <table class="userTable table table-striped table-bordered table-hover" id="userListTable">
- <thead>
- <tr>
- <th>MEMBERNAME</th>
- <th>ACCOUNTNUMBER</th>
- <th>AGE</th>
- <th>GENDER</th>
- <th>BIRTHDAY</th>
- <th>MEMBER_LABEL</th>
- </tr>
- </thead>
- <tbody>
- </tbody>
- </table>
- <!-- 分页 -->
- <ul id="pages" class="pages"></ul>
- 共 <input type="text" id="pageSize" value="5" readonly="readonly"> 条记录 /当前页:<input type="text" id="currentPage" readonly="readonly" class="currentPage">
- </div>
- <script type="text/javascript" src="${home}/res/js/jquery-1.11.3.min.js"></script>
- <script type="text/javascript" src="${home}/res/js/bootstrap.min.js"></script>
- <%-- <script type="text/javascript" src="${home}/res/js/jquery.1.7.2.min.js"></script> --%>
- <script type="text/javascript" src="${home}/res/js/docs.min.js"></script>
- <script type="text/javascript"
- src="${home}/res/js/ie10-viewport-bug-workaround.js"></script>
- <script type="text/javascript" src="${home}/res/js/memberUser.js"></script>
- <!-- 分页 -->
- <script src="${home}/res/js/page/jquery.twbsPagination.js" type="text/javascript"></script>
- <%-- <script src="${home}/js/page/zzsc.js" type="text/javascript"></script> --%>
- </body>
- </html>
memberUser.js
- //加载数据
- $(document).ready(function() {
- var param={};
- param.currentPage=1;
- param.limitPage=2;
- $.post(home+"/user/queryAllInfo",null,
- function(result)
- {
- if(result !=null && result.success)
- {
- var obj =result.rows;
- //总的页数是否大于10 如果大于则显示10页,否则显示总的页数
- var visiblePage=result.total>10?10:result.total;
- for ( var i = 0; i < obj.length; i++) {
- var user =obj[i];
- var tr = "<tr><td>"
- + user.MEMBERNAME
- + " </td> <td>"
- + user.ACCOUNTNUMBER
- + " </td> <td>"
- + user.AGE
- + " </td> <td>"
- + user.GENDER
- + " </td> <td>"
- + user.BIRTHDAY
- + " </td> <td>"
- + user.MEMBER_LABEL
- + " </td>";
- $(".userTable").append(tr);
- //--------------分页
- $('#pages').twbsPagination({
- //总共多少页
- totalPages: result.total,
- //页面显示几页
- visiblePages:visiblePage,
- version: '1.1',
- // href:home + "/user/queryAllInfo",
- onPageClick: function (event, page) {
- //调用分页函数
- setPage(page);
- }
- });
- }
- }else
- {
- alert(result.msg);
- }
- },"json"
- );
- });
- //实现分页
- function setPage(currentPage)
- {
- var param={};
- param.currentPage=currentPage;
- //每页几条数据
- param.limitPage=5;
- $.post(home+"/user/queryAllInfo",param,
- function(result)
- {
- if(result !=null && result.success)
- {
- var obj =result.rows;
- $("#pageSize").val(result.size);
- //清空上一次查询表中数据
- $('.userTable tbody').empty();
- for ( var i = 0; i < obj.length; i++) {
- var user =obj[i];
- var tr = "<tr><td>"
- + user.MEMBERNAME
- + " </td> <td>"
- + user.ACCOUNTNUMBER
- + " </td> <td>"
- + user.AGE
- + " </td> <td>"
- + user.GENDER
- + " </td> <td>"
- + user.BIRTHDAY
- + " </td> <td>"
- + user.MEMBER_LABEL
- + " </td>";
- $(".userTable").append(tr);
- }
- }else
- {
- alert(result.msg);
- }
- },"json"
- );
- }