这篇文章主要讲述SSH框架下如何整合AngularJS, JQuery Datatable 以及Bootstrap。
废话少说,进入主题,本篇主要以代码粘贴为主。
第一步:新建Maven项目,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/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.boyi.web</groupId> <artifactId>ssh-datatabase-example</artifactId> <version>1.0.0</version> <packaging>war</packaging> <name>ssh-datatabase-example</name> <description>ssh-datatable-example</description> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <spring.version>3.1.0.RELEASE</spring.version> <struts.version>2.3.15</struts.version> <hibernate.version>4.2.0.Final</hibernate.version> <mysql.version>5.1.6</mysql.version> </properties> <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</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> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.apache.struts</groupId> <artifactId>struts2-core</artifactId> <version>${struts.version}</version> </dependency> <dependency> <groupId>org.apache.struts</groupId> <artifactId>struts2-convention-plugin</artifactId> <version>${struts.version}</version> </dependency> <!-- JASON Plug-in --> <dependency> <groupId>org.apache.struts</groupId> <artifactId>struts2-json-plugin</artifactId> <version>${struts.version}</version> </dependency> <dependency> <groupId>org.apache.struts</groupId> <artifactId>struts2-spring-plugin</artifactId> <version>${struts.version}</version> </dependency> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>${hibernate.version}</version> </dependency> <!-- for JPA, use hibernate-entitymanager instead of hibernate-core --> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-entitymanager</artifactId> <version>${hibernate.version}</version> </dependency> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-c3p0</artifactId> <version>${hibernate.version}</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql.version}</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjrt</artifactId> <version>1.6.12</version> </dependency> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.6.12</version> </dependency> <dependency> <groupId>cglib</groupId> <artifactId>cglib</artifactId> <version>2.2</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-core-asl</artifactId> <version>1.8.8</version> </dependency> <dependency> <groupId>org.codehaus.jackson</groupId> <artifactId>jackson-mapper-asl</artifactId> <version>1.8.8</version> </dependency> </dependencies> <build> <finalName>ssh</finalName> </build> </project>
可以看出SSH的版本:
Spring : 3.1.0.RELEASE
Struts2: 2.3.15
Hibernate : 4.2.0.Final
第二步: 设置web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 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>ssh-datatable-example</display-name> <filter> <filter-name>CharacterEncoding</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> <init-param> <param-name>encoding</param-name> <param-value>UTF-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CharacterEncoding</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/dispatcher-servlet.xml </param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <filter> <filter-name>struts2</filter-name> <filter-class> org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter </filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>*.action</url-pattern> </filter-mapping> </web-app>
第三步:设置dispatcher-servlet.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:aop="http://www.springframework.org/schema/aop" xmlns:c="http://www.springframework.org/schema/c" xmlns:cache="http://www.springframework.org/schema/cache" xmlns:context="http://www.springframework.org/schema/context" xmlns:sec="http://www.springframework.org/schema/security" xmlns:jee="http://www.springframework.org/schema/jee" xmlns:lang="http://www.springframework.org/schema/lang" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:p="http://www.springframework.org/schema/p" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.1.xsd http://www.springframework.org/schema/cache http://www.springframework.org/schema/cache/spring-cache-3.1.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.1.xsd http://www.springframework.org/schema/lang http://www.springframework.org/schema/lang/spring-lang-3.1.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd http://www.springframework.org/schema/security http://www.springframework.org/schema/security/spring-security-3.1.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.1.xsd"> <mvc:annotation-driven> <mvc:message-converters> <bean class="org.springframework.http.converter.StringHttpMessageConverter"> <property name="supportedMediaTypes"> <list> <value>text/html;charset=UTF-8</value> <value>text/plain;charset=UTF-8</value> </list> </property> </bean> <bean id="jsonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" /> </mvc:message-converters> </mvc:annotation-driven> <context:component-scan base-package="com.boyi.web"></context:component-scan> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource" destroy-method="close"> <property name="driverClass" value="com.mysql.jdbc.Driver" /> <property name="jdbcUrl" value="jdbc:mysql://localhost:3307/ssh?characterEncoding=UTF-8&characterSetResults=UTF-8" /> <property name="user" value="root" /> <property name="password" value="admin" /> <property name="maxPoolSize" value="100" /> <property name="minPoolSize" value="20" /> <property name="initialPoolSize" value="10" /> <property name="maxIdleTime" value="1800" /> <property name="acquireIncrement" value="10" /> <property name="idleConnectionTestPeriod" value="600" /> <property name="acquireRetryAttempts" value="30" /> <property name="breakAfterAcquireFailure" value="false" /> <property name="preferredTestQuery" value="SELECT NOW()" /> </bean> <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate"> <constructor-arg ref="dataSource"></constructor-arg> </bean> <!-- hibernate 需要的信息 --> <bean id="sessionFactory" class="org.springframework.orm.hibernate4.LocalSessionFactoryBean"> <property name="dataSource" ref="dataSource" /> <property name="packagesToScan"> <list> <value>com.boyi.web.entity</value> </list> </property> <property name="hibernateProperties"> <props> <prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop> <prop key="hibernate.show_sql">true</prop> <prop key="hibernate.format_sql">true</prop> </props> </property> </bean> <aop:aspectj-autoproxy expose-proxy="true" /> <tx:annotation-driven transaction-manager="txManager" /> <bean id="txManager" class="org.springframework.orm.hibernate4.HibernateTransactionManager"> <property name="sessionFactory" ref="sessionFactory" /> </bean> <tx:advice id="txAdvice" transaction-manager="txManager"> <tx:attributes> <tx:method name="save*" propagation="REQUIRED" /> <tx:method name="add*" propagation="REQUIRED" /> <tx:method name="create*" propagation="REQUIRED" /> <tx:method name="insert*" propagation="REQUIRED" /> <tx:method name="*" read-only="true" /> </tx:attributes> </tx:advice> <aop:config proxy-target-class="true"> <aop:advisor advice-ref="txAdvice" pointcut="execution(* com..service..*.*(..))" /> </aop:config> </beans>第四步,准备css和js目录
1. 从JQuery官网下载最新的jquery.min.js ,copy到js目录,这里我下载的是jQuery v1.11.1
2. 从Bootstrap官网下载最新的bootstrap.min.js, bootstrap.min.css,分别copy到js和css目录中,这里我下载的是Bootstrap v3.3.0
3. 从Datatables官网下载最新的jquery.dataTables.min.js, dataTables.bootstrap.min.js,dataTables.bootstrap.css, 分别copy到js和css目录中,
目录结构如下:
第五步:写hibernate实体类
package com.boyi.web.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name = "PERSON")
public class Person {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private int id;
@Column(name = "NAME")
private String name;
@Column(name = "BIRTHDAY")
private String birth;
@Column(name = "GENDER")
private String gender;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getBirth() {
return birth;
}
public void setBirth(String birth) {
this.birth = birth;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
}
第六步:写hibernateDAO超类
package com.boyi.web.dao;
import java.io.Serializable;
import java.util.List;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.criterion.Criterion;
public interface HqlBaseDao<T, PK extends Serializable> {
int count();
/**
* Persist the newInstance object into database.
* @param newInstance to save
* @return The identifier
**/
PK save(T newInstance);
/**
* Save or update.
* @param transientObject to save
*/
void saveOrUpdate(T transientObject);
/**
* Retrieve a persisted object with a given id from the database.
* @param id to load
* @return An object of type T
*/
T load(PK id);
/**
* Retrieve a persisted object with a given id from the database.
* @param id to get
* @return An object of type T
*/
T get(PK id);
/**
* Save changes made to a persistent object.
* @param transientObject object to update
**/
void update(T transientObject);
/**
* Remove the given object from persistent storage in the database.
* @param persistentObject object to delete.
**/
void delete(T persistentObject);
/**
* Remove the given object from persistent storage in the database.
* @param s Query to execute
* @return A query object
**/
Query getQuery(String s);
/** Deletes an object of a given Id. Will load the object internally so
* consider using delete (T obj) directly.
* @param id Id of record
*/
void delete(PK id);
/** Delete object from disk.
* @param persistentObject to delete
* @param session to use
*
*/
void delete(T persistentObject, Session session);
/** Deletes an object of a given Id. Will load the object internally so consider using delete (T obj) directly.
* @param id to delete
* @param session to use
*/
void delete(PK id, Session session);
/**
* Loads the given Object.
* @param id to load
* @param session to use
* @return an object of type T
*/
T load(PK id, Session session);
/**
* Loads the given Object.
* @param id Id to load
* @param session to use
* @return An object of type T
*/
T get(PK id, Session session);
/** Save object to disk using given session.
* @param o to save
* @param session to use
* @return the id of the saved object
*
*/
PK save(T o, Session session);
/** Save or update given object.
* @param o item to save.
* @param session to use
*
*/
void saveOrUpdate(T o, Session session);
/** Update given object.
* @param o item to update
* @param session to use
*
*/
void update(T o, Session session);
/** Refreshes the object of type T.
* @param persistentObject to refresh
*/
void refresh(T persistentObject);
/**
* Get a query handle.
* @param s Query to use
* @param session to use
* @return Query object
*/
Query getQuery(String s, Session session);
/** FindByExample.
* @param exampleInstance to use
* @param excludeProperty to exclude
* @return A list of objects
*/
List<T> findByExample(T exampleInstance, String... excludeProperty);
/** Returns a list of objects.
* @return list of objects
*/
List<T> findAll();
List<T> findListForPage(String hql, Integer page, Integer size, Object... objects);
/** Flushes the cache of the currently-used session.
*
*/
void flush();
/** Object to evict from cache.
* @param obj Object to evict
*/
void evict(Object obj);
/** Hibernate wrapper.
* @param criterion to filter.
* @return list of objects
*/
List<T> findByCriteria(Criterion... criterion);
}
package com.boyi.web.dao.impl;
import java.io.Serializable;
import java.util.List;
import org.hibernate.Criteria;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.criterion.Criterion;
import org.hibernate.criterion.Example;
import org.springframework.beans.factory.annotation.Autowired;
import com.boyi.web.dao.HqlBaseDao;
public class HqlBaseDaoImpl<T, PK extends Serializable> implements HqlBaseDao<T, PK>{
/** Class type. */
Class<T> type;
@Autowired
SessionFactory sessionFactory;
/**
* Default bean constructor for spring.
*/
public HqlBaseDaoImpl() {
// default constructor for spring
}
/**
* Constructor.
*
* @param type
* class type
*/
public HqlBaseDaoImpl(Class<T> type) {
this.type = type;
}
/**
* Helper functions.
*
* @return the currently set class
*/
public Class<T> getPersistentClass() {
return this.type;
}
/**
* Delete persistentObject from DB.
*
* @param persistentObject
* object to delete.
*/
public void delete(T persistentObject) {
getSession().delete(persistentObject);
}
/**
* Deletes an object of a given Id. Will load the object internally so
* consider using delete (T obj) directly
*
* @param id
* Delete key
*/
public void delete(PK id) {
getSession().delete(load(id));
}
/**
* Loads the given Object.
*
* @param id
* to load
* @return T Loaded object
*/
@SuppressWarnings("unchecked")
public T load(PK id) {
return (T) getSession().load(this.type, id);
}
/**
* Loads the given Object.
*
* @param id
* Id to load
* @return An object of type T
*/
@SuppressWarnings("unchecked")
public T get(PK id) {
return (T) getSession().get(this.type, id);
}
/**
* Item to save.
*
* @param o
* object to save
* @return PK
*/
@SuppressWarnings("unchecked")
public PK save(T o) {
return (PK) getSession().save(o);
}
/**
* Item to refresh.
*
* @param o
* object to refresh
*/
public void refresh(T o) {
getSession().refresh(o);
}
/**
* Item to saveOrUpdate.
*
* @param o
* item to save.
*/
public void saveOrUpdate(T o) {
getSession().saveOrUpdate(o);
}
/**
* Update object.
*
* @param o
* object to update
*/
public void update(T o) {
getSession().update(o);
}
/**
* Gets the current session in use (creates one if necessary).
*
* @return Session object
*/
public Session getSession() {
return sessionFactory.getCurrentSession();
}
/**
* Get query.
*
* @param s
* Query to execute.
* @return Query object
*/
public Query getQuery(String s) {
return getSession().createQuery(s);
}
/**
* Get Session factory.
*
* @return SessionFactory Object
*/
public SessionFactory getSessionFactory() {
return sessionFactory;
}
/**
* Set session factory.
*
* @param sessionFactory
* object
*/
@Autowired
public void setSessionFactory(SessionFactory sessionFactory) {
this.sessionFactory = sessionFactory;
}
/**
* Delete object.
*
* @param persistentObject
* to delete
* @param session
* to use
*
*/
public void delete(T persistentObject, Session session) {
session.delete(persistentObject);
}
/**
* Deletes an object of a given Id. Will load the object internally so
* consider using delete (T obj) directly.
*
* @param id
* to delete
* @param session
* to use
*/
public void delete(PK id, Session session) {
session.delete(load(id));
}
/**
* Loads the given Object.
*
* @param id
* to load
* @param session
* to use
* @return an object of type T
*/
@SuppressWarnings("unchecked")
public T load(PK id, Session session) {
return (T) session.load(this.type, id);
}
/**
* Loads the given Object.
*
* @param id
* Id to load
* @param session
* Session to use
* @return An object of type T
*/
@SuppressWarnings("unchecked")
public T get(PK id, Session session) {
return (T) session.get(this.type, id);
}
/**
* Save object.
*
* @param o
* to save
* @param session
* to use
* @return the id of the saved object
*
*/
@SuppressWarnings("unchecked")
public PK save(T o, Session session) {
return (PK) session.save(o);
}
/**
* Save Or Update object.
*
* @param o
* to save
* @param session
* to use.
*
*/
public void saveOrUpdate(T o, Session session) {
session.saveOrUpdate(o);
}
/**
* Update record.
*
* @param o
* to update
* @param session
* to use
*
*/
public void update(T o, Session session) {
session.update(o);
}
/**
* GetQuery.
*
* @param s
* to return
* @param session
* to use
* @return Query object
*/
public Query getQuery(String s, Session session) {
return session.createQuery(s);
}
/**
* Wrapper around hibernate functions.
*
* @param criterion
* to use
* @return A list of matching objects
*/
@SuppressWarnings("unchecked")
public List<T> findByCriteria(Criterion... criterion) {
Session session = getSession();
Criteria crit = session.createCriteria(getPersistentClass());
for (Criterion c : criterion) {
crit.add(c);
}
return crit.list();
}
/**
* FindAll.
*
* @return A list of all the objects
*/
public List<T> findAll() {
return findByCriteria();
}
/**
* Flushes the cache of the currently-used session.
*
*/
public void flush() {
getSession().flush();
}
/**
* Object to evict from cache.
*
* @param obj
* Object to evict
*/
public void evict(Object obj) {
getSession().evict(obj);
}
/**
* FindByExample.
*
* @param exampleInstance
* to use
* @param excludeProperty
* to use
* @return List of matching objects
*/
@SuppressWarnings("unchecked")
public List<T> findByExample(T exampleInstance, String... excludeProperty) {
Criteria crit = getSession().createCriteria(getPersistentClass());
Example example = Example.create(exampleInstance);
for (String exclude : excludeProperty) {
example.excludeProperty(exclude);
}
crit.add(example);
return crit.list();
}
public List<T> findListForPage(String hql, Integer page, Integer size, Object... objects) {
Query query = getSession().createQuery(hql);
if (objects != null) {
for (int i = 0; i < objects.length; i++) {
query.setParameter(i, objects[i]);
}
}
if (page != null && size != null) {
query.setFirstResult((page - 1) * size).setMaxResults(size);
}
@SuppressWarnings("unchecked")
List<T> list = query.list();
return list;
}
@Override
public int count() {
Query query = getSession().createQuery("select count(*) from " + this.type.getName());
return ((Long)query.iterate().next()).intValue();
}
}
第七步:写hibernateDAO类
package com.boyi.web.dao;
import java.io.Serializable;
import java.util.List;
import com.boyi.web.entity.Person;
public interface PersonDao extends HqlBaseDao<Person, Serializable> {
/**
*
* @param page
* @param pageSize
* @return the person by pagination
* @throws Exception
*/
public List<Person> list(Integer page, Integer pageSize) throws Exception;
}
package com.boyi.web.dao.impl;
import java.io.Serializable;
import java.util.List;
import org.springframework.stereotype.Repository;
import com.boyi.web.dao.PersonDao;
import com.boyi.web.entity.Person;
@Repository
public class PersonDaoImpl extends HqlBaseDaoImpl<Person, Serializable> implements PersonDao {
public PersonDaoImpl() {
super(Person.class);
}
public List<Person> list(Integer page, Integer pageSize) throws Exception {
return findListForPage("from Person", page, pageSize);
}
}
第八步:写Service类
package com.boyi.web.service;
import java.util.List;
import com.boyi.web.entity.Person;
public interface PersonService {
/**
* return the person counts
* @return
* @throws Exception
*/
public int count() throws Exception;
/**
*
* @param page
* @param pageSize
* @return the person by pagination
* @throws Exception
*/
public List<Person> list(Integer page, Integer pageSize) throws Exception;
}
package com.boyi.web.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.boyi.web.dao.PersonDao;
import com.boyi.web.entity.Person;
import com.boyi.web.service.PersonService;
@Service
public class PersonServiceImpl implements PersonService {
@Autowired
PersonDao dao;
public int count() throws Exception {
return dao.count();
}
public List<Person> list(Integer page, Integer pageSize) throws Exception {
return dao.list(page, pageSize);
}
}
第九步:写Action类
package com.boyi.web.action;
import java.util.List;
import javax.annotation.Resource;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.stereotype.Controller;
import com.boyi.web.entity.Person;
import com.boyi.web.service.PersonService;
import com.opensymphony.xwork2.ActionSupport;
@ParentPackage("json-default")
@Controller
public class PersonAjaxAction extends ActionSupport {
private static final long serialVersionUID = 1L;
/**
* datatable start value
*/
private int start;
/**
* datatable page size
*/
private int length;
private int recordsTotal;
private int recordsFiltered;
private int recordsDisplay;
private List<Person> aaData;
@Resource
PersonService service;
@Override
@Action(value = "/persons", results = { @Result(name = "success", type = "json") })
public String execute() throws Exception {
// calculate the total records
recordsTotal = service.count();
// calculate the current page
int page = start / length + 1;
// query the persons
aaData = service.list(page, length);
recordsFiltered = recordsTotal;
recordsDisplay = aaData.size();
return ActionSupport.SUCCESS;
}
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getLength() {
return length;
}
public void setLength(int length) {
this.length = length;
}
public int getRecordsTotal() {
return recordsTotal;
}
public void setRecordsTotal(int recordsTotal) {
this.recordsTotal = recordsTotal;
}
public int getRecordsFiltered() {
return recordsFiltered;
}
public void setRecordsFiltered(int recordsFiltered) {
this.recordsFiltered = recordsFiltered;
}
public List<Person> getAaData() {
return aaData;
}
public void setAaData(List<Person> aaData) {
this.aaData = aaData;
}
public static long getSerialversionuid() {
return serialVersionUID;
}
public int getRecordsDisplay() {
return recordsDisplay;
}
public void setRecordsDisplay(int recordsDisplay) {
this.recordsDisplay = recordsDisplay;
}
}
第十步:写JSP
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SHH - Datatable - Example</title>
<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='css/dataTables.bootstrap.css'>
</head>
<body>
<hr>
<center>
<h1>SHH - Datatable - Example</h1>
</center>
<hr>
<div class="container">
<div class="row">
<table class="table table-striped table-bordered table-hover datatable" id="example"></table>
</div>
</div>
<script src='js/jquery.min.js'></script>
<script src='js/jquery.dataTables.min.js'></script>
<script src='js/dataTables.bootstrap.min.js'></script>
<script src='js/bootstrap.min.js'></script>
<script src='js/index.js'></script>
</body>
</html>
第十一步:写JS
$(document).ready(function() { $("#example").dataTable({ dom: "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-3'i><'col-sm-3'l><'col-sm-6'p>>", "processing" : true, "serverSide" : true, "length" : 5, "paging" : true, "ordering" : true, "pageLength" : 5, "paginationType" : "full_numbers", "lengthMenu" : [ 5, 10, 25, 50, 75, 100 ], "ajax" : { "url" : "persons.action", "type" : "POST" }, "columns" : [ { "title" : "ID", "data" : "id", "visible" : true, "orderable" : true, "render" : function(data, type, full, meta){ return '<a href="http://www.baidu.com">' + data +'</a>'; } }, { "title" : "NAME", "data" : "name", "visible" : true, "orderable" : true }, { "title" : "BIRTHDAY", "data" : "birth", "visible" : true, "orderable" : true }, { "title" : "GENDER", "data" : "gender", "visible" : true, "orderable" : true } ], "language" : { "emptyTable" : "没有数据", "info" : "显示 第 _START_ 到 _END_ 条数据 总共 _TOTAL_ 条数据 ", "infoEmpty" : "没有数据", "infoFiltered" : "(filtered from _MAX_ total entries)", "infoPostFix" : "", "thousands" : ",", "lengthMenu" : "每页显示条数 _MENU_ ", "loadingRecords" : "加载中...", "processing" : "处理中...", "search" : "搜索:", "zeroRecords" : "找不到匹配的数据", "paginate" : { "first" : "首页", "last" : "尾页", "next" : "下页", "previous" : "上页" } } }); });第十二步:数据库建表
DROP DATABASE IF EXISTS `ssh`;
CREATE DATABASE IF NOT EXISTS `ssh`
USE `ssh`;
DROP TABLE IF EXISTS `PERSON`;
CREATE TABLE IF NOT EXISTS `PERSON` (
`ID` int(9) NOT NULL AUTO_INCREMENT,
`NAME` varchar(20) NOT NULL,
`BIRTHDAY` varchar(20) NOT NULL,
`GENDER` varchar(5) NOT NULL,
PRIMARY KEY (`ID`)
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;
INSERT INTO `PERSON` (`ID`, `NAME`, `BIRTHDAY`, `GENDER`) VALUES
(1, 'NAME1', '1984-01-02', '男'),
(2, 'NAME2', '1984-01-03', '男'),
(3, 'NAME3', '1984-01-04', '男'),
(4, 'NAME4', '1984-01-05', '女'),
(5, 'NAME5', '1984-01-06', '男'),
(6, 'NAME6', '1984-01-07', '女'),
(7, 'NAME7', '1984-01-08', '男'),
(8, 'NAME8', '1984-01-09', '男'),
(9, 'NAME9', '1984-01-10', '男'),
(10, 'NAME10', '1984-01-11', '女'),
(11, 'NAME11', '1984-01-12', '男'),
(12, 'NAME12', '1984-01-13', '男'),
(13, 'NAME13', '1984-01-14', '女'),
(14, 'NAME14', '1984-01-15', '男'),
(15, 'NAME15', '1984-01-16', '男'),
(16, 'NAME16', '1984-01-17', '女'),
(17, 'NAME17', '1984-01-18', '男'),
(18, 'NAME18', '1984-01-19', '人妖'),
(19, 'NAME19', '1984-01-20', '男'),
(20, 'NAME20', '1984-01-12', '男'),
(21, 'NAME21', '1984-01-22', '男');
第十三步:打包部署,测试
完整代码在附件中,有兴趣的可以下载。