Select选择后,刷新页面保存上一次选择内容

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!doctype html>
<html class="no-js">
<head>
<base href="<%=basePath%>" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>-用户管理</title>
<meta name="description" content="这是一个 index 页面">
<meta name="keywords" content="index">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed"
href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="" />
<link rel="stylesheet" href="assets/css/bootstrap-combined.min.css">

<link rel="stylesheet" href="assets/css/amazeui.min.css" />
<link rel="stylesheet" href="assets/css/admin.css">
<link rel="stylesheet" href="assets/css/app.css">

</head>
<body οnlοad="selectIndex();">
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器,Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验!</p>
<![endif]-->

<%@ include file="/WEB-INF/include/header.jsp"%>

<div class="am-cf admin-main">
<%@ include file="/WEB-INF/include/menu.jsp"%>

<!-- content start -->
<div class="admin-content">

<div class="am-cf am-padding">
<div class="am-fl am-cf">
<strong class="am-text-primary am-text-lg">用户管理</strong>
</div>
</div>
<div class="am-g">
<div class="am-u-md-6 am-cf">
<div class="am-fl am-cf">
<form id="selectorForm" action="service/user/index" method="post">
<div class="am-btn-toolbar am-fl">
<div class="am-form-group am-margin-left am-fl">
<select name="device_type_selector" id="device_type_selector" οnchange="saveSelectIndex();">
<option value="0">--所有设备--</option>
<c:forEach items="${deviceTypes }" var="deviceType">
<c:choose>
<c:when
test="${deviceType.typeIndex eq device_type_selector}">
<option value="${deviceType.typeIndex }" selected>${deviceType.typeName }</option>
</c:when>
<c:otherwise>
<option value="${deviceType.typeIndex }">${deviceType.typeName }</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
</div>
<div class="am-form-group am-margin-left am-fl">
<select name="register_type_selector" οnchange="saveSelectIndex();"
id="register_type_selector" >
<option  value="" >--注册渠道--</option>
<option  value="0">正常注册</option>
<option  value="1">QQ注册</option>
<option  value="3">微信注册</option>
</select>
</div>
<c:choose>
<c:when test="${sessionScope.admin.company_id eq 0 }">
<div class="am-form-group am-margin-left am-fl">
<select name="channel_type_selector" οnchange="saveSelectIndex();"
id="channel_type_selector">
<option value="">--channel--</option>
<option value="9999">9999</option>
<option value="9998">9998</option>
</select>
</div>
</c:when>
</c:choose>
<div class="am-form-group am-margin-left am-fl">
查询条件: <input id="searchKey" />
</div>
<input type="hidden" id="page" name="page">
<div class="am-form-group am-margin-left am-fl">
<input id="searchButten" type="button" value="查询" />
</div>
</div>
</form>
</div>
</div>
</div>
<div class="am-g">
<div class="am-u-sm-12">
<table
class="am-table am-table-bd am-table-striped admin-content-table">
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>注册邮箱</th>
<th>性别</th>
<th>最近登录时间</th>
<th>最近登录IP</th>
<th>管理</th>
</tr>
</thead>
<tbody id="ttbody">
<c:forEach items="${allusers}" var="alluser" begin="0"
varStatus="status">
<tr>
<td>${alluser.user_id}</td>
<td><a href="service/user/show?user_id=${alluser.user_id}">${alluser.nickname}</a></td>
<td>${alluser.user_mail}</td>
<td>${alluser.user_sex==0?"女":"男"}</td>
<td>${alluser.latest_login_time}</td>
<td>${alluser.latest_login_ip}</td>
<td>
<div class="am-dropdown" data-am-dropdown>
<button
class="am-btn am-btn-default am-btn-xs am-dropdown-toggle"
data-am-dropdown-toggle>
<span class="am-icon-cog"></span> <span
class="am-icon-caret-down"></span>
</button>
<ul class="am-dropdown-content">
<li><a href="#">1. 编辑</a></li>
<li><a href="#">2. 下载</a></li>
<li><a href="#">3. 删除</a></li>
</ul>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<div id="pagination" style="margin-left: 22px;"></div>
</div>

<!-- content end -->
</div>

<%@ include file="/WEB-INF/include/footer.jsp"%>

<%@ include file="/WEB-INF/include/headref.jsp"%>

<script src="assets/js/bootstrap-paginator.js"></script>

<script type="text/javascript">
$(function() {

var options = {
currentPage : '${curPage}',
totalPages : '${pages }',
itemContainerClass : function(type, page, current) {
return (page === current) ? "active" : "pointer-cursor";
},
itemTexts : function(type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "前一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},
onPageClicked : function(e, originalEvent, type, page) {

e.stopImmediatePropagation();
var currentTarget = $(e.currentTarget);
setTableData(page);
 
currentTarget.bootstrapPaginator("show", page);

}
};

$('#pagination').bootstrapPaginator(options);

function setTableData(page) {
options.currentPage = page;
$("#page").val(page);
$("#selectorForm").submit();
}

$("#searchButten")
.click(
function() {
device_type = document
.getElementById("device_type_selector").value;
register_type = document
.getElementById("register_type_selector").value;
channel_type = document
.getElementById("channel_type_selector").value;
searchKey_1 = document
.getElementById("searchKey").value;
$.ajax({
type : 'post',
dataType : 'html',
data : {
device_type_selector : device_type,
register_type_selector : register_type,
channel_type_selector : channel_type,
searchKey : searchKey_1
},
url : 'service/user/search',
success : function(returnText) {
/* window.parent.CloseMsgBox();
if (returnText.substring(0,1) == "N"){
window.parent.ShowMsgBox(returnText.substring(1));
}
else{
window.parent.ShowMsgBox(returnText);
window.location.href = "service/user/index";
    SwitchObjectShow(objName,1);
} */
},
error : function() {/* window.parent.CloseMsgBox();window.parent.ShowMsgBox(ajaxErrorMsg); */
}
});
});
});

</script>
<script type="text/javascript">
    function saveSelectIndex(){   
        var typeId=document.getElementById("register_type_selector");   
        var typeIdText=typeId.options[typeId.selectedIndex].value;   
        var osId=document.getElementById("device_type_selector");   
        var osIdText=osId.options[osId.selectedIndex].value;   //设置多个cookie   
        var channelId=document.getElementById("channel_type_selector");   
        var channelIdText=channelId.options[channelId.selectedIndex].value;   //设置多个cookie  
        document.cookie="typeIdText="+typeIdText;   
        document.cookie="osIdText="+osIdText;
        document.cookie="channelIdText="+channelIdText;
}
function selectIndex(){   //记得初始化,否则会出现undefined   
        var typeIdText=0;   
        var osIdText=0;   //获取多个cookie  
        var channelIdText=0;
        var coosStr=document.cookie;//注意此处分隔符是分号加空格   
        var coos=coosStr.split("; ");   
        for(var i=0;i<coos.length;i++){      
                var coo=coos[i].split("=");      
                //alert(coo[0]+":"+coo[1]);      
                if("typeIdText"==coo[0]){ 
                        typeIdText=coo[1];      
                }
                if("osIdText"==coo[0]){ 
                        osIdText=coo[1];      
                }   
                if("channelIdText"==coo[0])
                {
                channelIdText = coo[1];
                }
        }     
        var typeId=document.getElementById("register_type_selector");   
        if(typeIdText==0){      
                typeId.selectedIndex=0;   
        }else{      
                var length=typeId.options.length;      
                for(var i=0;i<length;i++){ 
                        if(typeId.options[i].value==typeIdText){    
                                typeId.selectedIndex=i; 
                                break; 
                        }      
                }   
        }      
        var osId=document.getElementById("device_type_selector");   
        if(osIdText==0){      
                osId.selectedIndex=0;   
        }else{      
                var length=osId.options.length;      
                for(var i=0;i<length;i++){ 
                        if(osId.options[i].value==osIdText){    
                                osId.selectedIndex=i;    
                                break; 
                        }      
                }   
        }  
        
        var channelId=document.getElementById("channel_type_selector");   
        if(channelIdText==0){      
        channelId.selectedIndex=0;   
        }else{      
                var length=channelId.options.length;      
                for(var i=0;i<length;i++){ 
                        if(channelId.options[i].value==channelIdText){    
                        channelId.selectedIndex=i;    
                                break; 
                        }      
                }   
        }  
}
</script>
</body>
</html>
此中有两个点,一个是基于Bootstrap的分页插件.第二个是使用cookie以及JS来实现,当selector选择后,刷新页面selector自动选择上次选项。 

网上找的Demo 写的有点错误。 慢慢调试出来  修改后的,亲测可用。

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值