-
宝宝金水2017-09-19 00:00
- 10
- 27
- 0
1.前端使用的ajax,通过后端提供的接口地址，拿到了数据，遍历显示在页面；
目前也实现了分页展示，不过，点击下一页也只是局部刷新，地址栏并没有发生变化。
2.问题：如果刷新了页面就直接回到了初始化页面，这样看起来不合理，应该是回到用户的浏览的页面。
3.怎样将我现在的url地址加上pages=value，拼接在地址栏上???
html代码如下：
<body>
<form action="" method="get" id="myform">
<div>
<a class="close-btn" href="javascript:;"><img src="images/icon/close.png" alt="" /></a>
</div>
<div class="search-div search-div-en">
<input class="search-input" type="text">
<span class="search-sub">搜 索</span>
<select class="select-div">
<option class="option-btn1">A</option>
<option class="option-btn2">B</option>
</select>
</div>
</form>
<div class="wrap-lists">
<p class="search-p"><img src="images/icon/result.png">搜索结果共<span class="toatl">0 </span>个产品</p>
<ul class="list-ul"></ul>
</div>
<div class="wrap-lists-middle">
<img src="images/icon/UnsignedCondition.png" alt="">
<span>暂无符合条件的产品</span>
</div>
<div class="search-init">
<img src="images/icon/init.png" alt=""/>
</div>
<!--分页-->
<ul class="pagination" id="pagination1">
</ul>
</body>
js 代码
//中文界面
$(function(){
$(".search-sub").on('click',function(){
var value = $.trim($(".search-input").val());
var pageSize = 20;
var pageNum = 1;
//下拉选中的option值
var sel_value = $('.select-div option:selected').text(); //选中的文本
if(value == ""||value==null) {
$(".toatl").html("0"); //搜索结果为0
$(".list-ul").html(""); //列表置空
$(".wrap-lists-middle").hide(); //暂无图标
$(".search-init img").hide(); //初始化图标
$(".wrap-lists p").hide();//搜索提示
$("#pagination1").hide(); //分页隐藏
} else {
if(sel_value == "B") {
var dataUrl = "/LuceneSearch/searchB"
var ptype = 1;// $("#pagination1").html("");
} else if(sel_value == "A") {
var dataUrl = "/LuceneSearch/searchA"
var ptype = 0;
}
$.ajax({
url: dataUrl,
type: 'get',
data: {
keyword: value,
pageNum: pageNum,
pageSize: pageSize,
language:sel_value
},
dataType: 'json',
success: function(data) {
$(".toatl").html(data[0]["total"]); //搜索数
var pageTotal = Math.ceil(data[0]["total"] / pageSize);
var str = '';
var words = data[0]["result"]; //结果数
var value = $(".search-input").val(); //输入框值
if(words.length == undefined || words.length == 0) {
$(".toatl").html('0');
$(".list-ul").html("");
$(".wrap-lists-middle").show(); //暂无图标
$(".wrap-lists p").show();//搜索结果提示
$(".search-init img").hide();
$("#pagination1").hide();//分页隐藏
} else {
for(var i = 0; i < words.length; i++) {
var typestr = "http://products.chinamobiledevice.com/detailCN/" + words[i].searchUuid + "/" + ptype;
str += '<li><a href="' + typestr + '" target="_blank"><img src="' + words[i].searchDrawing + '" alt="暂无图片"/><p class="des-p" title="' + words[i].searchProfile+ '">' + words[i].searchProfile+ '</p></a><div class="border-ddd"></div></li>';
$(".list-ul").html(str);
$(".wrap-lists-middle").hide();
$(".wrap-lists p").show();//搜索结果提示
$(".search-init img").hide();
$("#pagination1").show();//分页显示
}
}
$.jqPaginator('#pagination1', {
totalPages: pageTotal,
visiblePages: pageTotal,
currentPage: 1,
onPageChange: function (num, type) {
aJax(num,20);
}
});
}
})
}
})
//分页逻辑
function aJax(num,rnNum){
var value = $.trim($(".search-input").val());
//下拉选中的option值
var sel_value = $('.select-div option:selected').text(); //选中的文本
if(value == ""||value==null) {
$(".toatl").html("0");
$(".list-ul").html("");
$(".wrap-lists-middle").hide(); //暂无匹配图标
$("#pagination1").hide(); //分页隐藏
$(".wrap-lists p").hide();//搜索结果提示
$(".search-init img").hide();
} else {
if(sel_value == "A") {
var dataUrl = "/LuceneSearch/searchA"
var ptype = 1;
} else if(sel_value == "B") {
var dataUrl = "/LuceneSearch/searchB"
var ptype = 0;
}
$.ajax({
url: dataUrl,
type: 'get',
data: {
keyword: value,
pageNum: num,
pageSize: rnNum,// pn:(num-1)*rnNum,
language:sel_value
},
dataType: 'json',
success: function(data) {
$(".toatl").html(data[0]["total"]); //搜索结果数
var str = '';
var words = data[0]["result"]; //结果数组
var value = $(".search-input").val(); //输入框值
if(words.length == undefined || words.length == 0) {
$(".toatl").html('0'); //无结果
$(".list-ul").html(""); //无列表
$(".wrap-lists-middle").show(); //暂无图标
$(".wrap-lists p").show();//搜索结果提示
$(".search-init img").hide();
$("#pagination1").hide();
} else {
for(var i = 0; i < words.length; i++) {
var typestr = "http://products.chinamobiledevice.com/detailCN/" + words[i].searchUuid + "/" + ptype;
str += '<li><a href="' + typestr + '" target="_blank"><img src="' + words[i].searchDrawing + '" alt="暂无图片"/><p class="des-p" title="' + words[i].searchProfile+ '">' + words[i].searchProfile+ '</p></a><div class="border-ddd"></div></li>';
$(".list-ul").html(str);
$(".wrap-lists-middle").hide();
$(".wrap-lists p").show();//搜索结果提示
$(".search-init img").hide();
$("#pagination1").show();
}
}
}
})
}
}
0
打赏
收藏
点击回答
您的回答被采纳后将获得：提问者悬赏的 10 元积分
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部