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>
    
  • 相关阅读:
    php使用PHPMailer邮件类发送邮件
    apache一个IP一个端口对应多个域名
    网页宽度自动适应手机屏幕宽度的方法
    PHP抓取网页图片
    innodb存储引擎
    mysql存储引擎概述
    mysql事务
    mysql字符集
    mysql数据对象
    SQL-基础学习4--聚集函数:AVG(),COUNT(),MAX(),MIN(),SUM();聚集不同值:DISTINCT
  • 原文地址:https://www.cnblogs.com/maomaodesu/p/12735576.html
Copyright © 2011-2022 走看看