SSH框架下的条件查询及查询结果分页_ssh 查文本几行

作者：Monodyee | 2024-03-03 17:43:04

踩

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

四、实体类编写

商品实体类 Product.java

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

分页对象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 + "]";
    }


}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

五、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);


}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

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

public interface ProductService {

    /**
     * 根据查询条件，查询商品分页信息
     * 
     * @param searchModel
     *            封装查询条件
     * @param pageNum
     *            查询第几页数据
     * @param pageSize
     *            每页显示多少条记录
     * @return 查询结果
     */

    Pager<Product> findByPage(Product searchModel, int pageNum, int pageSize);

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

实现类： 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;
    }

}1
2
3
4
5
6
7
8
9
10
11
12
13
14

七、控制层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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

八、前端的实现方式
都采用了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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

方式二：
这种方式采用了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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

九、效果演示
方式一：
方式一效果一
方式一效果二

方式二：
方式二效果一
方式二效果二
方式二效果三

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/185269

SSH框架下的条件查询及查询结果分页_ssh 查文本 几行

SSH框架下的条件查询及查询结果分页_ssh 查文本几行