zoukankan      html  css  js  c++  java
  • url拼接

    后台每次拼接组装出上次搜索的url,然后将url存入Model中,页面每次点击不同的条件的时候Model中取出上次请求的url,然后再加上新点击的条件参数实现跳转

    后端

    新增搜索条件

    移除搜索条件

    前端

    <div class="type-wrap logo" th:unless="${#maps.containsKey(searchMap,'brand')}">
    					<div class="fl key brand">品牌</div>
    					<div class="value logos">
    						<ul class="logo-list">
    							<li th:each="brand,brandSate:${result.brandList}">
                                    <a th:text="${brand}" th:href="@{${url}(brand=${brand})}"></a>
                                </li>
    						</ul>
    					</div>
    					<div class="ext">
    						<a href="javascript:void(0);" class="sui-btn">多选</a>
    						<a href="javascript:void(0);">更多</a>
    					</div>
    				</div>
    				<div class="type-wrap" th:each="spec,specStat:${result.specList}" th:unless="${#maps.containsKey(searchMap,'spec_'+spec.key)}">
    					<div class="fl key" th:text="${spec.key}">
    
                        </div>
    					<div class="fl value">
    						<ul class="type-list">
    							<li th:each="op,opstat:${spec.value}">
    								<a th:text="${op}" th:href="@{${url}('spec_'+${spec.key}=${op})}"></a>
    							</li>
    						</ul>
    					</div>
    					<div class="fl ext"></div>
    				</div>
    				<div class="type-wrap" th:unless="${#maps.containsKey(searchMap,'price')}">
    					<div class="fl key">价格</div>
    					<div class="fl value">
    						<ul class="type-list">
    							<li>
    								<a th:text="0-500元" th:href="@{${url}(price='0-500')}"></a>
    							</li>
    							<li>
    								<a th:text="500-1000元" th:href="@{${url}(price='500-1000')}"></a>
    							</li>
    							<li>
    								<a th:text="1000-1500元" th:href="@{${url}(price='1000-1500')}"></a>
    							</li>
    							<li>
    								<a th:text="1500-2000元" th:href="@{${url}(price='1500-2000')}"></a>
    							</li>
    							<li>
    								<a th:text="2000-3000元" th:href="@{${url}(price='2000-3000')}"></a>
    							</li>
    							<li>
    								<a th:text="3000元以上" th:href="@{${url}(price='3000')}"></a>
    							</li>
    						</ul>
    					</div>
    					<div class="fl ext">
    					</div>
    				</div>
    

    排序

    				<div class="type-wrap" th:unless="${#maps.containsKey(searchMap,'price')}">
    					<div class="fl key">价格</div>
    					<div class="fl value">
    						<ul class="type-list">
    							<li>
    								<a th:text="0-500元" th:href="@{${url}(price='0-500')}"></a>
    							</li>
    							<li>
    								<a th:text="500-1000元" th:href="@{${url}(price='500-1000')}"></a>
    							</li>
    							<li>
    								<a th:text="1000-1500元" th:href="@{${url}(price='1000-1500')}"></a>
    							</li>
    							<li>
    								<a th:text="1500-2000元" th:href="@{${url}(price='1500-2000')}"></a>
    							</li>
    							<li>
    								<a th:text="2000-3000元" th:href="@{${url}(price='2000-3000')}"></a>
    							</li>
    							<li>
    								<a th:text="3000元以上" th:href="@{${url}(price='3000')}"></a>
    							</li>
    						</ul>
    					</div>
    					<div class="fl ext">
    					</div>
    				</div>
    				<div class="type-wrap">
    					<div class="fl key">更多筛选项</div>
    					<div class="fl value">
    						<ul class="type-list">
    							<li>
    								<a>特点</a>
    							</li>
    							<li>
    								<a>系统</a>
    							</li>
    							<li>
    								<a>手机内存 </a>
    							</li>
    							<li>
    								<a>单卡双卡</a>
    							</li>
    							<li>
    								<a>其他</a>
    							</li>
    						</ul>
    					</div>
    					<div class="fl ext">
    					</div>
    				</div>
    

    数据分页查询

    获取上一页,通过page对象获取当前页pageNum并取上一页【th:href="@{${url}(pageNum=${page.upper})}"】,下一页同理
    选中效果,如果当前遍历到的页i与当前页currentpage相等,则激活active,否则空【th:class="${i}==${page.currentpage}?'active':''"】
    获得总页数【${page.last}】
    获得总记录数【${page.total}】

    <div class="fr page">
        <div class="sui-pagination pagination-large">
            <ul>
                <li class="prev disabled">
                    <a th:href="@{${url}(pageNum=${page.upper})}">«上一页</a>
                </li>
                <li th:each="i:${#numbers.sequence(page.lpage,page.rpage)}" th:class="${i}==${page.currentpage}?'active':''">
                    <a th:href="@{${url}(pageNum=${i})}" th:text="${i}"></a>
                </li>
                <li class="next">
                    <a th:href="@{${url}(pageNum=${page.next})}">下一页»</a>
                </li>
            </ul>
            <div>
                <span>共<i th:text="${page.last}"></i>页&nbsp;</span>
                <span>共<i th:text="${page.total}"></i>个商品&nbsp;</span>
            </div>
        </div>
    </div>
    
  • 相关阅读:
    【JAVA笔记——道】JAVA对象销毁
    【JAVA笔记——道】并发编程CAS算法
    httpClientUtil的get请求
    python基础 day11 下 ORM介绍 sqlalchemy安装 sqlalchemy基本使用 多外键关联 多对多关系 表结构设计作业
    python基础 day11 上 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令 事务 索引 python 操作mysql ORM sqlachemy学习
    Python基础 Day10 Gevent协程 SelectPollEpoll异步IO与事件驱动 Python连接Mysql数据库操作 RabbitMQ队列 RedisMemcached缓存 Paramiko SSH Twsited网络框架
    python基础 day9 进程、与线程区别 python GIL全局解释器锁 线程 进程
    python基础 day8 Socket语法及相关 SocketServer实现多并发
    python基础 day7 面向对象高级语法部分 异常处理 异常处理 Socket开发基础
    python基础 day6 面向对象的特性:封装、继承、多态 类、方法、
  • 原文地址:https://www.cnblogs.com/maomaodesu/p/12735576.html
Copyright © 2011-2022 走看看