SSH框架下的条件查询及查询结果分页

之前看过许多别人BLOG中写的方案，但是没有自己动手从数据库、后端、前端全过程实现的话，难以发现自己存在问题。一是没有形成自己独有的解决方案，二是不知道理论和现实之间的差异。

本文例子的使用场景：数据库中存储了一系列商品信息，字段包括商品名字和商品价格。
需要实现功能：商品名字支持 模糊查询，商品价格 支持精确查询。查询结果分页显示。

一、数据准备

二、项目结构

按照惯例，创建的是Maven项目，方便依赖Jar包的导入。vo包存放的是封装好的分页数据类，提供前端进行数据展示。

三、配置文件的编写
省略web.xml和两个peoperties，因为没有特别需要注意的点。
实际在写程序时，我生成了配置文件后不会直接去写。我习惯先写一部分通用的配置，例如数据库连接池和通用事务管理器等。其他的会留到写完类文件之后，需要进行单元测试时才配置到Spring容器中。

1、Spring配置文件。因为Bean的数量少，我偷懒采用直接写的方式。没有用到包扫描。

<?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:tx="http://www.springframework.org/schema/tx" 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/aop         http://www.springframework.org/schema/aop/spring-aop.xsd         http://www.springframework.org/schema/tx         http://www.springframework.org/schema/tx/spring-tx.xsd         http://www.springframework.org/schema/context         http://www.springframework.org/schema/context/spring-context.xsd">    <!-- 1：配置数据库相关参数 -->    <context:property-placeholder location="classpath:jdbc.properties" />    <!-- 2：数据库连接池Druid -->    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource"        init-method="init" destroy-method="close">        <!-- 配置连接池属性 -->        <property name="driverClassName" value="${jdbc.driverClassName}" />        <property name="url" value="${jdbc.url}" />        <property name="username" value="${jdbc.username}" />        <property name="password" value="${jdbc.password}" />        <!-- 配置初始化大小、最小、最大 -->        <property name="initialSize" value="1" />        <property name="minIdle" value="1" />        <property name="maxActive" value="20" />    </bean>    <!-- 配置Hibernate相关属性 -->    <bean id="sessionFactory"        class="org.springframework.orm.hibernate4.LocalSessionFactoryBean">        <property name="dataSource" ref="dataSource" />        <!-- 配置Hibernate属性 -->        <property name="hibernateProperties">            <props>                <prop key="hibernate.dialet">org.hibernate.dialect.MySQLDialect</prop>                <prop key="hibernate.show_sql">true</prop>                <prop key="hibernate.format_sql">true</prop>                <prop key="hibernate.hbm2ddl.auto">update</prop>            </props>        </property>        <!-- 加载映射文件 -->        <property name="mappingResources">            <list>                <value>org/lzx/sshm/domain/Product.hbm.xml</value>                <value>org/lzx/sshm/domain/Department.hbm.xml</value>                <value>org/lzx/sshm/domain/Employee.hbm.xml</value>            </list>        </property>    </bean>    <!-- 配置Action的类 多例 -->    <bean id="productAction" class="org.lzx.sshm.action.ProductAction"        scope="prototype">        <!-- 手动注入Service -->        <property name="productService" ref="productService"></property>    </bean>    <!-- 配置业务层的类 -->    <bean id="productService" class="org.lzx.sshm.service.impl.ProductServiceImpl">        <property name="productDao" ref="productDao" />    </bean>    <!-- 配置DAO层的类 -->    <bean id="productDao" class="org.lzx.sshm.dao.impl.ProductDaoImpl">        <property name="sessionFactory" ref="sessionFactory"></property>    </bean>    <!-- 配置事务管理器 -->    <bean id="transactionManager"        class="org.springframework.orm.hibernate4.HibernateTransactionManager">        <property name="sessionFactory" ref="sessionFactory"></property>    </bean>    <!-- 开启注解事务 -->    <tx:annotation-driven transaction-manager="transactionManager" /></beans>

2、Struts的配置文件

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"><struts>    <package name="ssh" extends="struts-default" namespace="/">        <!-- 由Spring负责创建action实体 -->        <!-- struts配置中的class直接写spring中的bean id，这种方式创建的Action可以使用aop进行管理 -->        <action name="product_*" class="productAction" method="{1}">            <!-- 这个是使用直接提交表单形式 -->            <result name="findAll">/jsp/show2.jsp</result>        </action>        <!-- 单纯用于跳转到显示页面，这个是使用Ajax -->        <action name="viewProduct">            <result>/jsp/show4.jsp</result>        </action>    </package></struts>

3、Hibernate交给Spring容器管理之后，就不需要写cfg.xml文件了。
右击Product实体类，使用Hibernate Tools自动生成对应的hbm.xml文件。

<?xml version="1.0"?><!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN""http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"><hibernate-mapping>    <class name="org.lzx.sshm.domain.Product" table="PRODUCT">        <id name="pid" type="java.lang.Integer">            <column name="PID" />            <generator class="native" />        </id>        <property name="pname" type="java.lang.String" length="20">            <column name="PNAME" />        </property>        <property name="price" type="java.lang.Double">            <column name="PRICE" />        </property>    </class></hibernate-mapping>

四、实体类编写

商品实体类 Product.java

public class Product {    private Integer pid;    private String pname;    private Double price;    //省略构造函数和get/set方法  }

分页对象VO Pager.java

public class Pager<T> implements Serializable {    private static final long serialVersionUID = -8741766802354222579L;    private int pageSize; // 每页显示多少条记录    private int currentPage; //当前第几页数据    private int totalRecord; // 一共多少条记录    private int totalPage; // 一共多少页记录    private List<T> dataList; //要显示的数据    public Pager(int pageNum, int pageSize, List<T> sourceList){        if(sourceList == null || sourceList.isEmpty()){            return;        }        // 总记录条数        this.totalRecord = sourceList.size();        // 每页显示多少条记录        this.pageSize = pageSize;        //获取总页数        this.totalPage = this.totalRecord / this.pageSize;        if(this.totalRecord % this.pageSize !=0){            this.totalPage = this.totalPage + 1;        }        // 当前第几页数据        this.currentPage = this.totalPage < pageNum ?  this.totalPage : pageNum;        // 起始索引        int fromIndex   = this.pageSize * (this.currentPage -1);        // 结束索引        int toIndex  = this.pageSize * this.currentPage > this.totalRecord ? this.totalRecord : this.pageSize * this.currentPage;        this.dataList = sourceList.subList(fromIndex, toIndex);    }    public Pager(){    }    public Pager(int pageSize, int currentPage, int totalRecord, int totalPage,            List<T> dataList) {        super();        this.pageSize = pageSize;        this.currentPage = currentPage;        this.totalRecord = totalRecord;        this.totalPage = totalPage;        this.dataList = dataList;    }    public int getPageSize() {        return pageSize;    }    public void setPageSize(int pageSize) {        this.pageSize = pageSize;    }    public int getCurrentPage() {        return currentPage;    }    public void setCurrentPage(int currentPage) {        this.currentPage = currentPage;    }    public int getTotalRecord() {        return totalRecord;    }    public void setTotalRecord(int totalRecord) {        this.totalRecord = totalRecord;    }    public int getTotalPage() {        return totalPage;    }    public void setTotalPage(int totalPage) {        this.totalPage = totalPage;    }    public List<T> getDataList() {        return dataList;    }    public void setDataList(List<T> dataList) {        this.dataList = dataList;    }    @Override    public String toString() {        return "Pager [pageSize=" + pageSize + ", currentPage=" + currentPage + ", totalRecord=" + totalRecord                + ", totalPage=" + totalPage + ", dataList=" + dataList + "]";    }}

五、DAO层编写

DAO接口：ProductDao.java

/** * 商品管理的Dao *  * @author Skye * */public interface ProductDao  {    /**     * 根据查询条件，查询商品分页信息     *      * @param searchModel     *            封装查询条件     * @param pageNum     *            查询第几页数据     * @param pageSize     *            每页显示多少条记录     * @return 查询结果     */    Pager<Product> findByPage(Product searchModel, int pageNum,            int pageSize);}

DAO实现类：ProductDaoImpl.java

public class ProductDaoImpl extends HibernateDaoSupport implements ProductDao {    public Pager<Product> findByPage(Product searchModel, int pageNum, int pageSize) {        // 声明结果集        Pager<Product> result = null;        // 存放查询参数        Map<String, Object> paramMap = new HashMap<String, Object>();        String proName = searchModel.getPname();        Double price = searchModel.getPrice();        StringBuilder hql = new StringBuilder("from Product where 1=1");        StringBuilder countHql = new StringBuilder("select count(pid) from Product where 1=1 ");        if (proName != null && !proName.equals("")) {            hql.append(" and pname like :proName ");            countHql.append("  and pname like :proName ");            paramMap.put("proName", "%" + proName + "%");        }        if (price != null && !price.equals("")) {            hql.append(" and price = :price ");            countHql.append(" and price = :price ");            paramMap.put("price", price);        }        // 起始索引        int fromIndex = pageSize * (pageNum - 1);        // 存放所有查询出的商品对象        List<Product> productList = new ArrayList<Product>();        Session session = null;        // 获取被Spring托管的session        session = this.getHibernateTemplate().getSessionFactory().getCurrentSession();        // 获取query对象        Query hqlQuery = session.createQuery(hql.toString());        Query countHqlQuery = session.createQuery(countHql.toString());        // 设置查询参数        setQueryParams(hqlQuery, paramMap);        setQueryParams(countHqlQuery, paramMap);        // 从第几条记录开始查询        hqlQuery.setFirstResult(fromIndex);        // 一共查询多少条记录        hqlQuery.setMaxResults(pageSize);        // 获取查询的结果        productList = hqlQuery.list();        // 获取总记录数        List<?> countResult = countHqlQuery.list();        int totalRecord = ((Number) countResult.get(0)).intValue();        // 获取总页数        int totalPage = totalRecord / pageSize;        if (totalRecord % pageSize != 0) {            totalPage++;        }        // 组装pager对象        result = new Pager<Product>(pageSize, pageNum, totalRecord, totalPage, productList);        return result;    }    /**     * 设置查询的参数     *      * @param query     * @param paramMap     * @return     */    private Query setQueryParams(Query query, Map<String, Object> paramMap) {        if (paramMap != null && !paramMap.isEmpty()) {            for (Map.Entry<String, Object> param : paramMap.entrySet()) {                query.setParameter(param.getKey(), param.getValue());            }        }        return query;    }}

六、Service层编写
接口： ProductService.java

public interface ProductService {    /**     * 根据查询条件，查询商品分页信息     *      * @param searchModel     *            封装查询条件     * @param pageNum     *            查询第几页数据     * @param pageSize     *            每页显示多少条记录     * @return 查询结果     */    Pager<Product> findByPage(Product searchModel, int pageNum, int pageSize);}

实现类： ProductServiceImpl.java

public class ProductServiceImpl implements ProductService {    private ProductDao productDao;    public void setProductDao(ProductDao productDao) {        this.productDao = productDao;    }    public Pager<Product> findByPage(Product searchModel, int pageNum, int pageSize) {        Pager<Product> result = productDao.findByPage(searchModel, pageNum, pageSize);        return result;    }}

七、控制层Action编写
这个Action采用了两套不同的方法。
方式一： findAll方法是支持前端使用Form表单直接提交查询数据，然后将分页对象压入值栈（方式很多，存入Servlet 对象中也是可行的）；
方式二： findAllJSON方法是支持前端AJAX提交数据然后返回JSON格式数据的。详情见注释。

public class ProductAction extends ActionSupport implements ModelDriven<Product> {    // 模型驱动需要使用的实体类    private Product product = new Product();    //该例子实际没有用到自动绑定，数据从request对象中取了    public Product getModel() {        return product;    }    //返回前端的JSON字符串，需要提供get/set方法    private String responseStr;     public String getResponseStr() {        return responseStr;    }    public void setResponseStr(String responseStr) {        this.responseStr = responseStr;    }    // Struts和Spring整合过程中按名称自动注入的业务层类    private ProductService productService;    public void setProductService(ProductService productService) {        this.productService = productService;    }    // 方式一    public String findAll() {        System.out.println("控制器方法启动");        // 使用struts2的servlet接口，接收request里的参数        // 商品名字参数        HttpServletRequest request = ServletActionContext.getRequest();        String proName = request.getParameter("proName");        // 获取价格        Double price = null;        String priceStr = request.getParameter("price");        if (priceStr != null && !"".equals(priceStr.trim())) {            price = Double.parseDouble(priceStr);        }        // 校验pageNum参数输入合法性        String pageNumStr = request.getParameter("pageNum");        System.out.println("前端给的pageNum是："+pageNumStr);        int pageNum = 1; // 默认显示第几页数据        if (pageNumStr != null && !"".equals(pageNumStr.trim())) {            pageNum = Integer.parseInt(pageNumStr);        }        int pageSize = 5; // 默认每页显示多少条记录        String pageSizeStr = request.getParameter("pageSize");        if (pageSizeStr != null && !"".equals(pageSizeStr.trim())) {            pageSize = Integer.parseInt(pageSizeStr);        }        // 组装模糊查询条件        Product searchModel = new Product();        searchModel.setPname(proName);        searchModel.setPrice(price);        System.out.println("==============Product对象==============");        System.out.println(searchModel);        // 调用service 获取查询结果        Pager<Product> result = productService.findByPage(searchModel, pageNum, pageSize);        // 将pageBean存入值栈，供前端页面读取                ActionContext.getContext().getValueStack().push(result);        // 将查询条件也压回值栈，在初始化函数中为其初始化        ActionContext.getContext().getValueStack().push(searchModel);        System.out.println("==============Pager对象==============");        System.out.println(result);        System.out.println("控制器方法完成");        return "findAll";    }    //方式二：Ajax+JSON    public String findAllJSON() {        // 使用struts2的servlet接口，接收request里的参数        // 商品名字参数        HttpServletRequest request = ServletActionContext.getRequest();        HttpServletResponse response = ServletActionContext.getResponse();        String proName = request.getParameter("proName");        // 获取价格        Double price = null;        String priceStr = request.getParameter("price");        if (priceStr != null && !"".equals(priceStr.trim())) {            price = Double.parseDouble(priceStr);        }        // 取得页面索引        String pageNumStr = request.getParameter("pageNum");        int pageNum = 1; // 默认显示第几页数据        if (pageNumStr != null && !"".equals(pageNumStr.trim())) {            pageNum = Integer.parseInt(pageNumStr);        }        int pageSize = 5; // 默认每页显示多少条记录        String pageSizeStr = request.getParameter("pageSize");        if (pageSizeStr != null && !"".equals(pageSizeStr.trim())) {            pageSize = Integer.parseInt(pageSizeStr);        }        // 组装模糊查询条件        Product searchModel = new Product();        searchModel.setPname(proName);        searchModel.setPrice(price);        // 调用service 获取查询结果        Pager<Product> result = productService.findByPage(searchModel, pageNum, pageSize);        // 将查询结果封装成JSON字符串格式            responseStr = JSONObject.toJSONString(result);        System.out.println(responseStr);        // 利用response对象传回前端        response.setHeader("Cache-Control", "no-cache");          response.setHeader("Pragma", "no-cache");          response.setDateHeader("Expires", 0);          response.setContentType("text/html;charset=utf-8");             try {            Writer writer = response.getWriter();            writer.write(responseStr);            writer.flush();        } catch (IOException e) {            e.printStackTrace();        }        return NONE;    }}

八、前端的实现方式
都采用了JQuery-Pagination插件。
方式一：
注意：在Struts值栈中的对象，可以直接用属性名拿到他的值。比如说，我们之前往值栈中push了一个Pager对象，他有一个属性是dataList，那么我们就能够直接在c:forEach items=”${dataList}”；为了保留上一页的查询条件，我们需要从后台把查询条件再次传回前台，所以往值栈push了一个Product类对象，因此在使用JavaScript初始化函数时，就可以为$(“#pro_name”).val(“${pname}”); $(“#pro_price”).val(“${price}”);设定分页查询的属性值。这么做的原因是，直接使用Form的Submit提交是同步的，会直接刷新整个页面，那么之前文本框里的查询条件就会丢失。可以采用Chrome的F12开发者工具进行分析。

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@taglib uri="/struts-tags" prefix="s"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">.table1 {    border: 1px solid #ddd;    width: 900px;}thead {    background-color: lightblue;}</style></head><%    // 获取请求的上下文    String context = request.getContextPath();%><link href="${pageContext.request.contextPath}/css/pagination.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.pagination.js"></script><script type="text/javascript">// 点击分页按钮以后触发的动作function handlePaginationClick(new_page_index, pagination_container) {    $("#proForm").attr("action", "<%=context %>/product_findAll.action?pageNum=" + (new_page_index +1));    $("#proForm").submit();    return false;}//初始化函数$(function(){    $("#News-Pagination").pagination(${totalRecord}, {        items_per_page:${pageSize}, // 每页显示多少条记录        current_page:${currentPage} - 1, // 当前显示第几页数据        num_display_entries:2, // 连续分页主体显示的条目数        next_text:"下一页",        prev_text:"上一页",        num_edge_entries:2, // 连接分页主体，显示的条目数        callback:handlePaginationClick, //执行的回调函数，也就是去获取新的分页数据        load_first_page:false //防止页面一直刷新( 这条非常重要！)            });     // 初始化时就获得后台发过来的前一次的查询参数    $("#pro_name").val("${pname}");    $("#pro_price").val("${price}");});</script><body>    <div>        <form action="<%=context %>/product_findAll.action" id="proForm" method="post">            商品名称 <input type="text" name="proName" id="pro_name" style="width: 120px" > &nbsp;             商品价格 <input type="text" name="price" id="pro_price" style="width: 120px" > &nbsp;         <input type="submit" value="查询">        </form>    </div><c:if test="${fn:length(dataList) gt 0 }"><table border="1px" cellspacing="0px"                style="border-collapse: collapse">                <thead>                    <tr height="30">                <td align="center">商品编号</td>                <td align="center">商品名称</td>                <td align="center">商品价格</td>                    </tr>                </thead>                    <c:forEach items="${dataList}" var="p">                        <tr>                            <td><c:out value="${p.pid }"></c:out></td>                            <td><c:out value="${p.pname }"></c:out></td>                            <td><c:out value="${p.price }"></c:out></td>                        </tr>                    </c:forEach>            </table>            <br>             <div id="News-Pagination"></div>    </c:if>    <div>后台传来的当前页:${currentPage}</div></body></html>

方式二：
这种方式采用了Ajax异步提交数据。在没有使用ajax-submit插件的情况下，不能直接用JQuery绑定表单的submit事件了，它会像方式1一样提交，那么查询数据就会丢失。采用Ajax的方式异步提交，只刷新页面的一部分元素，那么查询条件是不会丢失的。

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@taglib uri="/struts-tags" prefix="s"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">.table1 {    border: 1px solid #ddd;    width: 900px;}thead {    background-color: lightblue;}</style></head><%    // 获取请求的上下文    String context = request.getContextPath();%><link href="${pageContext.request.contextPath}/css/pagination.css"    rel="stylesheet" type="text/css" /><script type="text/javascript"    src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script><script type="text/javascript"    src="${pageContext.request.contextPath}/js/jquery.pagination.js"></script><script type="text/javascript">$(function(){    Query();    });// JQuery-Pagination的初始化function JPagination(result){    $("#News-Pagination").pagination(result.totalRecord, {        items_per_page:result.pageSize, // 每页显示多少条记录        current_page:result.currentPage - 1, // 当前显示第几页数据        num_display_entries:2, // 连续分页主体显示的条目数        next_text:"下一页",        prev_text:"上一页",        num_edge_entries:2, // 连接分页主体，显示的条目数        callback:handlePaginationClick, //执行的回调函数，也就是去获取新的分页数据        load_first_page:false //防止页面一直刷新( 这条非常重要！)            });     }//点击分页按钮以后触发的动作function handlePaginationClick(new_page_index, pagination_container) {    //根据ID从表单中获取查询需要的参数    var pname = $("#pro_name").val();      var price = $("#pro_price").val();    var pageIndex = new_page_index + 1;    //异步方式提交查询     $.ajax({                   type: "POST",                //返回结果转换成json,方便用data.属性的方式取值                dataType: "json",                  url: "<%=context%>/product_findAllJSON.action" ,                   data: "pageNum="+ pageIndex +"&proName=" + pname + "&price=" + price,                  success: function(result) {                     //加载结果的JSON字符串                    var totalRecord = result.totalRecord;                    var currentPage = result.currentPage; // 获取当前第几页数据                    var productList = result.dataList; // 学生记录信息                                        //生成表格内容                                        showProductData(productList);                    //不需要再进行分页插件初始化                        }             });     return false;}//直接自定义一个button来发起查询function Query(){       $("#btn2").click(function(){        //根据ID从表单中获取查询需要的参数        var pname = $("#pro_name").val();          var price = $("#pro_price").val();        //异步方式提交查询         $.ajax({                       type: "POST",                    //返回结果转换成json,方便用data.属性的方式取值                    dataType: "json",                      url: "<%=context%>/product_findAllJSON.action" ,                       data: "proName=" + pname + "&price=" + price,                      success: function(result) {                         //加载结果的JSON字符串                        var totalRecord = result.totalRecord;                        var currentPage = result.currentPage; // 获取当前第几页数据                        var productList = result.dataList; // 学生记录信息                        //生成表格内容                                            showProductData(productList);                        //生成表格后对JQeury插件进行初始化                        JPagination(result);                            }                 });         });}//加载学生的数据function showProductData(proList) {        //每次加载新页面清空原来的内容        $("#proDataBody").empty();        var proDataHtml = "";        $.each(proList, function(idx, obj) {            proDataHtml += "<tr>";            proDataHtml += "<td>" + obj.pid + "</td>"; // 获取商品编号的值            proDataHtml += "<td>" + obj.pname + "</td>"; // 获取商品名称的值            proDataHtml += "<td>" + obj.price + "</td>"; // 获取商品价格的值            proDataHtml += "</tr>";        });        $("#proDataBody").append(proDataHtml);    }</script><body>    <div>        <form id="proForm">            商品名称 <input type="text" name="proName" id="pro_name" style="width: 120px"> &nbsp;             商品价格 <input type="text" name="price" id="pro_price" style="width: 120px"> &nbsp;        </form>    <button id="btn2">查找</button>    </div>    <div id="div1">        <h2>商品信息</h2>    </div>    <br>    <!-- 后台返回结果不为空 -->    <table border="1px" cellspacing="0px" style="border-collapse: collapse"        id="ProductTable">        <thead>            <tr height="30">                <th width="130">商品编号</th>                <th width="130">商品名称</th>                <th width="130">商品价格</th>            </tr>        </thead>        <tbody id="proDataBody">        </tbody>    </table><div id="News-Pagination"></div></body></html>

九、效果演示
方式一：

方式二：

十、项目github地址
https://github.com/kaka0509/SSH_Pagination