zoukankan      html  css  js  c++  java
  • 前台开发-----实现分页以及实现商品列表所属的商品分类

    分页初始的效果:

    修改分页前端的显示:

     使用代码实现总页数以及当前所在的页下一页,上一页、首页、尾页的实现:

    实现的最终效果:

    代码的实现:

    <div style='text-align:center;'>
    <a class='btn btn-info'   <c:if test="${p.pageNo==1 }">disabled</c:if>  <c:if test="${p.pageNo!=1 }">href="${pageContext.request.contextPath }/goods_list?pageNo=1&id=${id}"</c:if>>首页</a>
    <a class='btn btn-info' <c:if test="${p.pageNo==1 }">disabled</c:if> <c:if test="${p.pageNo!=1 }">href="${pageContext.request.contextPath }/goods_list?pageNo=${p.pageNo-1}&id=${id}"</c:if>>上一页</a>
    <h3 style='display:inline;'>[${p.pageNo }/${p.totalPage }]</h3>
    <h3 style='display:inline;'>[${p.totalCount }]</h3>
    <a class='btn btn-info' <c:if test="${p.totalPage==0 || p.pageNo==p.totalPage }">disabled</c:if> <c:if test="${p.pageNo!=p.totalPage }">href="${pageContext.request.contextPath }/goods_list?pageNo=${p.pageNo+1}&id=${id}"</c:if>>下一页</a>
    <a class='btn btn-info' <c:if test="${p.totalPage==0 || p.pageNo==p.totalPage }">disabled</c:if> <c:if test="${p.pageNo!=p.totalPage }">href="${pageContext.request.contextPath }/goods_list?pageNo=${p.totalPage}&id=${id}"</c:if>>尾页</a>
    <input type='text' class='form-control' style='display:inline;60px;' value=''/><a class='btn btn-info' href='javascript:void(0);' onclick='location.href="${pageContext.request.contextPath }/goods_list?id=${id}&pageNo="+(this.previousSibling.value)'>GO</a>
    </div>

    还需在GoodsListServlet中获取id:

    request.setAttribute("id", id);

    显示商品列表所属的商品分类:

    还有一处,没进行修改,点击某一个系列的时候,它的标题不会跟着变化:

    商品列表所属的类名:

    在TypeDao层进行异常的抛出,加入查询系列的代码:

    public Type select(int id) throws SQLException {
            QueryRunner r=new  QueryRunner(DBUtil.getDataSource());
            String sql="select * from type where id=?";
            
            return r.query(sql, new BeanHandler<Type>(Type.class),id);
            
            
        }

    在TypeService中进行异常的处理:

    public Type select(int id) {
                
                
                Type t=null;
                try {
                    t = tDao.select(id);
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                return t;
            }

    之后在GoodsListServlet中

    加入的代码为,如果id=0,其值变为null。

    Type t=null;
            if(id!=0) {
                t=tService.select(id);
            }
            
            request.setAttribute("t",t);

    将goods_list.jsp中的这一句修改即可:

    <h2><c:choose><c:when test="${empty t }">全部系列</c:when><c:otherwise> ${t.name}</c:otherwise></c:choose></h2>

    最终效果:

  • 相关阅读:
    Algs4-2.3.11快排遇与切分值相同时继续扫描是平方级
    使用kubeadm搭建Kubernetes集群
    kubernetes发布解释型语言应用的最佳实践
    docker化php项目发布方式
    linux服务器免密钥登录
    cp 递归复制时 复制实际文件而不是链接文件
    nginx配置http访问自动跳转到https
    nfs服务器
    nginx防止恶意域名解析
    如何建立自己的知识体系?(摘)
  • 原文地址:https://www.cnblogs.com/jiguiyan/p/10603782.html
Copyright © 2011-2022 走看看