微信咨询

微信咨询

13610*910*9

服务热线 7*24小时

电话咨询

layui分页#!开启hash后如何获取当前页的解决方案

iamdu2022-06-11 21:00:23 浏览: 575970



今天使用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>