SSM(Spring,springmvc,mybatis)+maven+AJAX实现分页功能
简介经过这段时间的工作,有一种强烈的写博客的想法,或是为了分享,或是为了记录自己的点滴,也是为了加深印象,也是为了锻炼自己表达能力和描述问题的能力。在工作的过程中很多内容都是别人搭建好的,所以很多问题自己是遇不到的,只有自己亲自动手才会知道很多东西该怎么用,遇到问题该怎么解决。同时程序员共享的精神和长期保持学习也是非常重要的。
项目目录结构如下
简单介绍一下,各个文件和类的作用,首先,先了解配置文件,按照编写的顺序讲解。首先是pom.各个包的作用几乎都有解释是用来干嘛的了,不知道的可以自行网上查找。
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.libo</groupId>
<artifactId>blog</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>blog Maven Webapp</name>
<url>http://maven.apache.org</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<spring.version>4.3.7.RELEASE</spring.version>
<jackson.version>1.9.13</jackson.version>
<druid.version>1.0.29</druid.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-mock</artifactId>
<version>2.0.8</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- 事物管理 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- JDBC操作 -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<!-- 定时器使用 -->
<dependency>
<groupId>org.quartz-scheduler</groupId>
<artifactId>quartz</artifactId>
<version>2.2.1</version>
</dependency>
<!-- 数据库连接池 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>${druid.version}</version>
</dependency>
<!-- mysql驱动包 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.38</version>
</dependency>
<!-- mybatis包 -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.2.4</version>
</dependency>
<!-- mybatis-spring整合包 -->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.0</version>
</dependency>
<!-- webSocket操作 -->
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>7.0</version>
</dependency>
<!-- 文件上传下载 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-io</artifactId>
<version>1.3.2</version>
</dependency>
<!-- 拦截验证属性约束 -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.1.3.Final</version>
</dependency>
<!-- JSTL标签引入 -->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!-- json对象和数组的相互转换使用 -->
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>
<!-- spring4.0以上版本出现的内容 -->
<dependency>
<groupId>commons-httpclient</groupId>
<artifactId>commons-httpclient</artifactId>
<version>3.1</version>
</dependency>
<!-- java对象和json对象相互转化 -->
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>${jackson.version}</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>${jackson.version}</version>
</dependency>
<!-- JSON解析 工具包,提供基于流模式API,包冲突-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.7.0</version>
</dependency>
<!-- json工具包,可以实现xml,json,java对象之间的互转-->
<dependency>
<groupId>com.fasterxml.jackson.dataformat</groupId>
<artifactId>jackson-dataformat-xml</artifactId>
<version>2.7.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.7.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-core -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>4.3.7.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<finalName>blog</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.6</version>
<configuration>
<warSourceDirectory>src/main/webapp</warSourceDirectory>
<failOnMissingWebXml>true</failOnMissingWebXml>
</configuration>
</plugin>
</plugins>
</build>
</project>
接下来是db.properties文件,相信有点基础的人都知道里面各个参数的作用,我就不多说了,各位可以把里面的用户名和密码改为自己需要的。
jdbc.driverClass=com.mysql.jdbc.Driver
#jdbc.url=jdbc\:mysql\://192.168.0.104\:3306/blog?useUnicode=true&characterEncoding=utf-8
jdbc.url=jdbc\:mysql\://127.0.0.1\:3306/blog?useUnicode=true&characterEncoding=utf-8
jdbc.username=root
jdbc.password=123
日志文件
log4j.xml,对于初学者来说,这个文件觉得很不爽,为什么要加呢?这个文件的加入,往往是后期我们找bug的关键,所以也要好好的去了解一下。我比较习惯于用log4j.properties这种文件形式,也是为了偷懒,将就一下。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE log4j:configuration PUBLIC "-//log4j/log4j Configuration//EN" "log4j.dtd">
<log4j:configuration xmlns:log4j="http://jakarta.apache.org/log4j/">
<appender name="STDOUT" class="org.apache.log4j.ConsoleAppender">
<layout class="org.apache.log4j.PatternLayout">
<param name="ConversionPattern" value="[MSTREAM]-%d %-5p %c.%M:%L - %m%n"/>
</layout>
</appender>
<appender name="RollingFile" class="org.apache.log4j.RollingFileAppender">
<param name="MaxFileSize" value="500MB"/>
<param name="File" value="logs/mstream.log"/>
<param name="Append" value="true" />
<layout class="org.apache.log4j.PatternLayout">
<param name="ConversionPattern" value="%d %-5p %c.%M:%L - %m%n"/>
</layout>
</appender>
<logger name="org.springframework" additivity="false">
<level value="INFO" />
<appender-ref ref="STDOUT" />
</logger>
<logger name="net.sf.json.JSONObject" additivity="false">
<level value="ERROR" />
<appender-ref ref="STDOUT" />
</logger>
<!-- end of pay attention-->
<!-- for all other loggers log only info and above log messages -->
<root>
<priority value="DEBUG"/>
<appender-ref ref="STDOUT" />
<!-- <appender-ref ref="RollingFile" /> -->
</root>
</log4j:configuration>
接下来是spring.xml文件
相应的配置相信大家都比较熟悉,我也不解释原因了。直接上文件内容,里面有的配置本来是不需要的,但是为了接下来我写其他内容,所以懒得配置了,例如上传下载的配置等等。Mybatis的sqlSessionFactory的内容配置需要注意一下,里面使用了 配置之后,在*Mapper.xml文件中,里面的类型可省略不需要写全类名,只需要一个类名就好了。不然会报错的。
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.0.xsd">
<!-- 配置自动扫描 -->
<context:component-scan base-package="com.blog.service"></context:component-scan>
<!--配置数据库访问 -->
<context:property-placeholder location="classpath:db.properties"/>
<!-- druid数据源 --> <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource"
init-method="init" destroy-method="close"> <property name="url" value="${jdbc.url}"
/> <property name="driverClassName" value="${jdbc.driverClass}" /> <property
name="username" value="${jdbc.username}" /> <property name="password" value="${jdbc.password}"
/> <property name="filters" value="stat" /> <property name="maxActive" value="3"
/> <property name="initialSize" value="1" /> <property name="maxWait" value="60000"
/> <property name="minIdle" value="2" /> <property name="timeBetweenEvictionRunsMillis"
value="3000" /> <property name="minEvictableIdleTimeMillis" value="300000"
/> <property name="validationQuery" value="SELECT 'x'" /> <property name="testWhileIdle"
value="true" /> <property name="testOnBorrow" value="false" /> <property
name="testOnReturn" value="false" /> </bean>
<!-- 配置事物属性 -->
<bean id="transactionInterceptor" class="org.springframework.transaction.interceptor.TransactionInterceptor">
<property name="transactionManager" ref="transactionManager"/><property name="transactionAttributes">
<props>
<prop key="*">PROPAGATION_REQUIRED,-Exception</prop>
<prop key="get*">PROPAGATION_REQUIRED,readOnly</prop>
<prop key="find*">PROPAGATION_REQUIRED,readOnly</prop>
<prop key="list*">PROPAGATION_REQUIRED,readOnly</prop>
<prop key="query*">PROPAGATION_REQUIRED,readOnly</prop>
<prop key="retrieve*">PROPAGATION_REQUIRED,readOnly</prop>
</props>
</property>
</bean>
<!-- TransactionTemplate
<bean id="commonTransactionTemplate" class="org.springframework.transaction.support.TransactionTemplate">
<property name="transactionManager" ref ="transactionManager" />
</bean> -->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" />
</bean>
<!--Mybatis的sqlSessionFactory -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="mapperLocations" value="classpath:com/blog/mapper/xml/*.xml" />
<property name="typeAliasesPackage" value="com.blog.vo"/>
</bean>
<!--自动扫描指定包内接口为org.mybatis.spring.mapper.MapperFactoryBean Dao接口所在包名 -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.blog.mapper" />
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
</bean>
<!-- 事务管理
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource"ref="dataSource" />
</bean>-->
<!-- 上传文件配置操作 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="20000000"/>
</bean>
</beans>
spring-mvc.xml文件配置
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation=" http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.0.xsd">
<!-- 自动扫描该包,使Springmvc认为包下使用了@Controller注解的类是控制器 -->
<context:component-scan base-package="com.blog.controller" />
<!-- 定义文件跳转的前后缀,完成请求和POJO的映射 -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass"
value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/view/" />
<property name="suffix" value=".jsp" />
</bean>
<!-- 静态资源映射 -->
<mvc:resources mapping="/resource/js/**" location="/resources/js/" />
<mvc:resources mapping="/resource/css/**" location="/resources/css/" />
<mvc:resources mapping="/resource/images/**" location="/resources/images/" />
<mvc:resources mapping="/resource/fonts/**" location="/resources/fonts/" />
<mvc:resources mapping="/resource/plugins/**" location="/resources/plugins/" />
<!-- <bean id="jsonConverter"
class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="jsonConverter" />
</list>
</property>
</bean> -->
<!-- 自动注册DefaultAnnotationHandlerMapping与AnnotationMethodHandlerAdapter
两个bean,是spring MVC为@Controllers分发请求所必须的 -->
<mvc:annotation-driven />
</beans>
web.xml文件
这个文件内容一定不要忘记,我当初初学的时候这个文件里老是出问题。不知道的自行百度
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
version="3.0">
<display-name>blog</display-name>
<!-- Spring -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<listener>
<listener-class>org.springframework.web.util.IntrospectorCleanupListener</listener-class>
</listener>
<!-- 设置编码格式为utf8 -->
<filter>
<filter-name>Set Character Encoding</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>Set Character Encoding</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- Spring MVC配置 -->
<servlet>
<servlet-name>blog</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>blog</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
下面开始操作。为了方便,在User类中我仅仅用了id,userName,password三个字段,代码如下
package com.blog.vo;
import java.io.Serializable;
public class User implements Serializable {
private Integer id;
private String userName;
private String password;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
在设计Page的时候,为了简便,我也只使用了三个字段。首先我考虑到数据库中的查询是:select * from table_name limit start_number,size;所以我只需要开始查询的起始条数start_number和每次查询显示的条数size,准确的来说我用到了两个。里面的skip字段表示需要跳过的条数
package com.blog.vo;
import java.io.Serializable;
public class Page implements Serializable {
/**
* @author libo
*
*/
private static final long serialVersionUID = 1L;
private int pageSize; //每页显示的条数
private Integer skip;//跳过的条数,也就是起始数
private String orderByClause;//排序字段
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public Integer getSkip() {
return skip;
}
public void setSkip(Integer skip) {
this.skip = skip;
}
public String getOrderByClause() {
return orderByClause;
}
public void setOrderByClause(String orderByClause) {
this.orderByClause = orderByClause;
}
}
UserController类包含我所要控制的操作
package com.blog.controller;
import java.util.List;
import java.util.Map;
import org.apache.commons.collections.map.HashedMap;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.blog.service.UserService;
import com.blog.vo.Page;
import com.blog.vo.ResultInfoVO;
import com.blog.vo.User;
@SuppressWarnings("unchecked")
@Controller
@RequestMapping(value="user")
public class UserController {
private static final Logger log = Logger.getLogger(UserController.class);
@Autowired
private UserService userService;
// @RequestMapping(value="/list",method=RequestMethod.GET)
// @ResponseBody
// public ResultInfoVO getAllList(){
// log.info("Enter method getAllList ");
// int result = 1;
// String message = "";
// ResultInfoVO vo = new ResultInfoVO();
// List<User> users = userService.getAllUsers();
// if(users!=null){
// vo.setObject(users);
// message = "成功!";
// result = 0;
// }
// vo.setResult(result);
// vo.setRtnMessage(message);
// return vo;
// }
//
@RequestMapping(value="/initIsZero",method=RequestMethod.POST)
@ResponseBody
public ResultInfoVO initIsZero(Integer indexPage,Integer pageSize){
log.info("Enter method initIsZero ");
ResultInfoVO vo = new ResultInfoVO();
int count = userService.getUserCount();
Page page = new Page();
int result = -1;
String rtnMessage = "";
page.setSkip(indexPage*pageSize); //设置跳过的条数
page.setPageSize(pageSize); //设置要显示多少条数据,可在前端页面中更改
List<User> users = userService.getPageZero(page);
Map<String,Object> map = new HashedMap();
if(users!=null){
map.put("users", users);
map.put("count",count);
result=0;
rtnMessage = "OK";
}
vo.setObject(map);
vo.setRtnMessage(rtnMessage);
vo.setResult(result);
return vo;
}
@RequestMapping(value="/indexPageNotZero",method=RequestMethod.POST)
@ResponseBody
public ResultInfoVO indexPageNotZero(Integer indexPage,Integer pageSize){
log.info("Enter method initIsZero ");
ResultInfoVO vo = new ResultInfoVO();
Page page = new Page();
int result = -1;
String rtnMessage = "";
page.setSkip(indexPage*pageSize); //设置跳过的条数
page.setPageSize(pageSize); //设置要显示多少条数据,可在前端页面中更改
List<User> users = userService.getPageZero(page);
Map<String,Object> map = new HashedMap();
if(users!=null){
result = 0;
rtnMessage = "OK";
map.put("users", users);
}
vo.setObject(map);
System.out.println(map.get("users").toString());
vo.setResult(result);
vo.setRtnMessage(rtnMessage);
return vo;
}
}
接下来实现方法以及使用的接口
package com.blog.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.blog.mapper.UserMapper;
import com.blog.service.UserService;
import com.blog.vo.Page;
import com.blog.vo.User;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public List<User> getAllUsers() {
return userMapper.getAllUsers();
}
@Override
public List<User> getPageZero(Page page) {
return userMapper.getPageZero(page);
}
@Override
public int getUserCount() {
return userMapper.getAllUserCount();
}
}
接口定义
package com.blog.service;
import java.util.List;
import com.blog.vo.Page;
import com.blog.vo.User;
public interface UserService {
List<User> getAllUsers();
List<User> getPageZero(Page page);
int getUserCount();
}
UserMapper接口文件
package com.blog.mapper;
import java.util.List;
import com.blog.vo.Page;
import com.blog.vo.User;
public interface UserMapper {
//获取所有用户
List<User> getAllUsers();
//分页查询数据
//获取该对象的所有数
int getAllUserCount();
//获取数据的条数
List<User> getPageZero(Page page);
}
接口定义的方法和UserMapper.xml文件内容对应
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.blog.mapper.UserMapper" >
<!-- <resultMap type="BaseResultMap" id="com.blog.vo.User">
<id column="id" property="id" jdbcType="INTEGER" />
<result column="username" property="userName" jdbcType="VARCHAR" />
<result column="passowrd" property="password" jdbcType="VARCHAR" />
</resultMap> -->
<!-- 获取所有用户 -->
<select id="getAllUsers" resultType="User">
select username,password from user
</select>
<select id="getAllUserCount" resultType="java.lang.Integer">
select count(*) from user
</select>
<select id="getPageZero" resultType="User" parameterType="com.blog.vo.Page">
select * from user limit #{skip},#{pageSize}
</select>
</mapper>
接下来到前端页面
目录结构如下:
其中的pagination.css和jquery.pagination.js是一个分页插件,很小。最后我会把项目放进来。
在index.jsp页面中内容如下:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<html>
<head>
<%-- <%@ include file="..common/common.jsp"%> --%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>myblog</title>
<head>
<link rel="stylesheet" href="<%=basePath%>resource/css/pagination.css" />
<script type="text/javascript" src="<%=basePath%>resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="<%=basePath%>resource/js/jquery.pagination.js"></script>
<style type="text/css">
body{
height:100%;
width:100%;
}
#page{
padding-left:45%;
}
#Pagination{
font-size: 12px;
letter-spacing: 4px;
padding-left:550px;
margin-top:20px;
}
</style>
</head>
<body>
<div id="page">
<h4>我的分页操作</h2>
<table>
<thead>
<tr>
<th>姓名</th>
<th>密码</th>
</tr>
</thead>
<tbody id="showUser">
</tbody>
</table>
</div>
<div id="Pagination">
</div>
</body>
<script type="text/javascript">
var pageIndex = 0; //页面索引初始值
var pageSize = 6; //每页显示条数初始化,修改显示条数,修改这里即可
$(document).ready(function(){
searchRecords(0);
});
function searchRecords(indexPage){
var url = "";
if(indexPage==0){
url='<%=basePath%>user/initIsZero';
}else{
url='<%=basePath%>user/indexPageNotZero';
}
$.ajax({
url:url,
type:"POST",
data:"indexPage="+indexPage+"&pageSize="+pageSize,
dataType:'json',
async: false,
success:function(data){
if(data.result==0){
if(indexPage==0){
initPage(data.object.count);
}
initContext(data.object.users);
}
},
error:function(data){
alert(data.rtnMessage);
}
});
}
function initContext(array){
var html = '';
if(array!=null){
for(i in array){
html += '<tr>';
html += '<td>'+array[i].userName+'</td>';
html += '<td>'+array[i].password+'</td>';
html += '</tr>';
}
$("#showUser").html(html);
}else{
$("#showUser").html('');
}
}
//分页操作,传入记录的总条数
function initPage(total){
$("#Pagination").pagination(total,{
callback: PageCallback, //PageCallback() 为翻页调用次函数。
prev_text: "上一页",
next_text: "下一页",
items_per_page:pageSize,
num_edge_entries: 2, //两侧首尾分页条目数
num_display_entries: 6, //连续分页主体部分分页条目数
current_page: pageIndex, //当前页索引
});
}
//翻页调用
function PageCallback(index, jq) {
searchRecords(index);
}
</script>
</html>
最后整体内容就是这样子。加入后运行效果如下:
写博客之前有很多话要说,最想把自己在整个过程中遇到的问题通通说出来,但是真正写代码的时候发现无话可说,很难受,想吐又吐不出来,最后也只有希望小伙伴们给我多多提意见,我会把我在这个过程中遇到的问题释疑,确实不知道需要讲什么,再接再厉。
最后附代码地址:http://download.csdn.net/detail/qq_25050981/9919437