layui分页#!开启hash后如何获取当前页的解决方案
今天使用layui做分页功能,发现当直接输入网址访问的时候,#!page=2 服务器端无法获取page的值,如果改成?page=2 服务器端就能正确取值,但是研究了layui的参数发现无法把#!改成?
于是换个思路吧,地址栏打开的时候,通过前端JS获取到地址栏里的page值,通过Ajax异步请求加载数据,成功了!
完整代码如下:
<script>
layui.use('laypage', function(){
var Totalnum = $(".Totalnum").val();
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
,count: Totalnum //数据总数,从服务端得到
,limit:10
,theme: '#1E9FFF'
,curr: location.hash.replace('#!page=', '') //获取hash值为fenye的当前页
,hash:"page"
,jump: function(obj, first) {
//console.log(obj)
if (!first) {
var curr = obj.curr;
// $.POST("blog#!page=", {
// pageNum: (curr-1)*10,
// },
// function(data) {
// alert(data)
// // var data1 = $(data).find(".nr").html();
// // $("#tiles").html(data1);
// })
$.ajax({
type: 'GET',
url: "/blog_page", // ajax请求路径
data: {
pageNum: (curr-1)*10,
},
dataType:'json',
success: function(data){
// var data1 = $(data).find("#content").html();
// $("#content").html(data1);
$("#content").hide()
// $("#wrap").text(data.posts);
var srcHtml = '';
$.each(data.posts, function(i, item) {
srcHtml += '<div class="layui-card card31"><div class="layui-card-header"><a class="a" href="/detail/'+item.ID+'" target="_blank">'+item.Title+'</a><div class="del" style="float:right;"><a href="/detail/'+item.ID+'" class="layui-btn layui-btn-primary layui-border-green"><i class="layui-icon layui-icon-read layui-font-12"></i>查看文章</a><a href="/update_doc/'+item.ID+'" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-edit layui-font-12"></i>修改文章</a><button type="button" class="layui-btn layui-btn-primary layui-border-red button" value="'+item.ID+'"><i class="layui-icon layui-icon-delete layui-font-12"></i>删除文章</button></div></div><div class="layui-card-body">'+item.Content+'</div></div>';
})
$("#wrap").html(srcHtml)
// data = JSON.parse(data);
// pageCount =data.result.pageCount;
// shuju(data.result.dataList);
// paged(data);
}
});
}else{
//地址栏直接访问的
var yema = window.location.href.split('page=');
var yema2 = yema[1] //地址栏访问下直接获取地址栏的页数
$.ajax({
type: 'GET',
url: "/blog_page", // ajax请求路径
data: {
pageNum: (yema2-1)*10,
},
dataType:'json',
success: function(data){
// var data1 = $(data).find("#content").html();
// $("#content").html(data1);
$("#content").hide()
// $("#wrap").text(data.posts);
var srcHtml = '';
$.each(data.posts, function(i, item) {
srcHtml += '<div class="layui-card card31"><div class="layui-card-header"><a class="a" href="/detail/'+item.ID+'" target="_blank">'+item.Title+'</a><div class="del" style="float:right;"><a href="/detail/'+item.ID+'" class="layui-btn layui-btn-primary layui-border-green"><i class="layui-icon layui-icon-read layui-font-12"></i>查看文章</a><a href="/update_doc/'+item.ID+'" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-edit layui-font-12"></i>修改文章</a><button type="button" class="layui-btn layui-btn-primary layui-border-red button" value="'+item.ID+'"><i class="layui-icon layui-icon-delete layui-font-12"></i>删除文章</button></div></div><div class="layui-card-body">'+item.Content+'</div></div>';
})
$("#wrap").html(srcHtml)
// data = JSON.parse(data);
// pageCount =data.result.pageCount;
// shuju(data.result.dataList);
// paged(data);
}
});
}
}
});
});
</script>
联系站长
友情链接
其他入口
QQ与微信加好友
粤ICP备17018681号 站点地图 www.iamdu.com 版权所有 服务商提供:阿里云 Designed by :DU
本站部分资源内容来源于网络,若侵犯您的权益,请联系删除!