SpringMVC -jquery实现分页

SpringUtil.java

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

<?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"
);

}

项目源码：http://download.csdn.net/detail/u013147600/9024027

四种jQuery+bootstrap分页效果插件： http://download.csdn.net/detail/u013147600/9023943