JS.jQuery获取浏览器参数

来源:互联网 发布:nginx 静态服务器配置 编辑:程序博客网 时间:2024/05/16 12:59

今天在做搜索+分页的时候,出现了一个问题:由于我搜索之后与之前的页面用的是同一个页面,所以搜索之后的数据分页后会形成一个与搜索之前不同的列表集合,这时如果点击下一页的时候集合会混乱。我任务最简单最好的解决方法是编写两个不同的页面来显示,但是公司之前的同事为了方便设计用的是同一个页面来显示,只是SQL语句传递参数不同而已,所以才给我出来一难题。经过一天的思考与编写与测试,终于顺利完成,思想如下(此处不解释分页原理):

先是获取输入框的输入条件后付给浏览器页面地址之上,然后用以下jQuery代码来进行获取

function GetQueryString(name) 
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
if(r!=null)return  decodeURI(r[2]); return null;
} //获取浏览器参数;

//以下为分页所需参数。
var currentPage = $("input[name='currentPage']").val();
currentPage=parseInt(currentPage);
currentPage=currentPage-1;
//alert(currentPage);当前页面
var total = $("input[name='total']").val();
total=parseInt(total);
//alert(total);总页数
var selection = GetQueryString("selection");
if(selection==null){selection='';}
var con = GetQueryString("con");
if(con==null){con='';}
var type = GetQueryString("type");
if(type==null){type='';}


if(currentPage<=0){
alert("没有此页!");
return;
}

window.location.href=encodeURI("SACMS/RDM/WebPage/pages/modelD.w.xhtml?selection="+selection+"&con="+con+"&type="+type+"&navId="+GetQueryString("navId")+"&currentPage="+currentPage);

注意:这里的decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

html代码:

搜索框代码:

<div class="form-group" style="width:100%;margin:0 auto;height:50;margin-top:$params.p_top;margin-left:$params.p_left;">
<div style="float:left;">
<select name="selection" class="form-control" style="background:#3f8bE1;color:#fff;" id="selection">
<option>分类</option>
<c:forEach items="$params.dynamicTable" var="tableTr" varStatus="d">
<option value="%{tableTr.code}">%{tableTr.text}</option>
</c:forEach>
</select>
</div>
<div style="background-image:url('$path.toRequest($params.backImg)');float:left;margin-left:8;">
<input type="text" id="con" name="con" style="width:320px;height:34px;border-top-width: 3px;border-left-width: 2px;
border-right-width: 2px;border-bottom-width: 2px;"/>
</div>
<div class="form-group">
<input type="image"  src="$path.toRequest($params.backImg1)" style="margin-left:10px;width:$params.img_width;height:$params.img_height;"/>
<input type="hidden" name="navId" value="%{param.navId}"/>
</div>
</div>
<div class="form-group" name="wrap" style="margin:0 auto;width:100%;font-size:$params.rad_fontsize;margin-left:$params.ch_left;">
<label class="radio-inline">
  <input type="radio" name="type" id="Radio1" checked="" value="$params.check1" style="width:$params.rad_fontsize;height:$params.rad_fontsize;background:#fff;"/>中文名</label>
<label class="radio-inline" style="margin-left:20;">
  <input type="radio" name="type" id="Radio2" checked=""  value="$params.check2" style="width:$params.rad_fontsize;height:$params.rad_fontsize;"/>学名</label>
<label class="radio-inline" style="margin-left:20;">
  <input type="radio" name="type" id="Radio3" checked=""  value="$params.check3" style="width:$params.rad_fontsize;height:$params.rad_fontsize;"/>科名</label>
  <label class="radio-inline" style="margin-left:20;">
  <input type="radio" name="type" id="Radio4" checked=""  value="$params.check4" style="width:$params.rad_fontsize;height:$params.rad_fontsize;"/>产地</label>
</div>


分页按钮代码:

<table style="displayinline">
<tr><td>
<input id="First" type="button" value="$params.dynamicFirstContent" $tool.ifNotEmpty($params.onClick4,"onClick='$path.toJsMethod(${params.onClick4})'") style="background-color:#FFFFFF;height:30px;"/>
</td>
<td>
<input id="Previous" type="button" value="$params.dynamicPreviousContent" $tool.ifNotEmpty($params.onClick1,"onClick='$path.toJsMethod(${params.onClick1})'") style="background-color:#FFFFFF;height:30px;"/>
</td>
<td>
<input id="now" type="button" value="$params.currentPage/共$params.total页" style="background-color:#FFFFFF;height:30px;"/>

</td>
<td>
<input id="last" type="button" value="$params.dynamicNextContent" $tool.ifNotEmpty($params.onClick2,"onClick='$path.toJsMethod(${params.onClick2})'") style="background-color:#FFFFFF;height:30px;"/>
</td>
<td>
<input id="Last" type="button" value="$params.dynamicLastContent" $tool.ifNotEmpty($params.onClick5,"onClick='$path.toJsMethod(${params.onClick5})'") style="background-color:#FFFFFF;height:30px;"/>
</td>
<td>
<li style="float:left;margin-left:10px;color:black;">到<input type="text" name="page" value="1" onfocus="this.value=''" onblur="if(this.value==''){this.value='1'}"  style="margin-right:5px;height:28px;width:30px;"  />页</li>
<input id="last" type="button" value="确定" $tool.ifNotEmpty($params.onClick3,"onClick='$path.toJsMethod(${params.onClick3})'") style="background-color:#FFFFFF;height:30px;"/>
</td>
</tr>
</table>


0 0
原创粉丝点击