laypage同一页面加入多处分页实现

21 篇文章 0 订阅

之前用laypage做分页 pagingNew.jsp 这个是 每个页面加载的分页js


 
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="jst" uri="http://www.jlrnt.net/jst"%>

<script type="text/javascript"
	src="<c:url value='/resources/thirdparty/laypage.js' />"></script>
	
<input id="urlTo" type="hidden" value="${param.pageTo}" />
<div id="Pagination" class="right flickr"></div>
<input id="pageNo" type="hidden" value="${data.pageNo}"style="width: 50px;" />
<input id="pageCount" type="hidden" value="${data.pageCount}"style="width: 50px;" />
<script type="text/javascript">
   var ctx = "${pageContext.request.contextPath}";
   var noNow= $("#pageNo").val();
	 
	   //alert("noNow"+$("#pageNo").val());
	   laypage({
		    cont: $('#Pagination'), //容器。值支持id名、原生dom对象,jquery对象,
		    pages:$("#pageCount").val(), //总页数
		    skip: true, //是否开启跳页
		    skin: '#20a5de',
		    groups: 10 ,//连续显示分页数
		    curr:  $("#pageNo").val(), //当前页
            jump: function(obj, first){ //触发分页后的回调
                if(!first){ //点击跳页触发函数自身,并传递当前页:obj.curr
                    //demo(obj.curr);
                    var urlTo = $("#urlTo").val();
                    var url = ctx + urlTo ;
                    //alert("obj.curr"+obj.curr);
                    $("#pageNo").val(obj.curr);
                    // alert("#pageNo"+$("#pageNo").val());
                    location.href=url+"pageNo="+$("#pageNo").val();
                }
            }
		});
	 
    </script>


要分页页面里面加载
   <jsp:include page="/WEB-INF/view/include/pagingNew1.jsp" flush="true">
								<jsp:param name="pageTo" value="/revit/list.html?key=${searchKey}&year=${param.year}&system=${param.system}
								&type=${param.type}&tagId=${tagId}&" />
</jsp:include>  

 这个页面会跳转到控制器层面 现在需要一个页面里面加入多处分页 比如 实现如下
   <jsp:include page="/WEB-INF/view/include/pagingNew.jsp" flush="true">
								<jsp:param name="pageTo" value="/revit/list.html?key=${searchKey}&year=${param.year}&system=${param.system}
								&type=${param.type}&tagId=${tagId}&" />
	</jsp:include>     
                    
                    
  <jsp:include page="/WEB-INF/view/include/pagingNew.jsp" flush="true">
								<jsp:param name="pageTo" value="/revit/list.html?key=${searchKey}&year=${param.year}&system=${param.system}
								&type=${param.type}&tagId=${tagId}&" />
	</jsp:include>


发现 不OK 。。还是只有一处分页

查了些资料 可能是jsp:param  参数pageTo 可能冲突 换了别名 也不行


想了个笨方法 

pagingNew.jsp 再写一个pagingNew1.jsp  代码和之前一样  


    <jsp:include page="/WEB-INF/view/include/pagingNew.jsp" flush="true">
								<jsp:param name="pageTo" value="/revit/list.html?key=${searchKey}&year=${param.year}&system=${param.system}
								&type=${param.type}&tagId=${tagId}&" />
	</jsp:include>     
                    
                    
					<jsp:include page="/WEB-INF/view/include/pagingNew1.jsp" flush="true">
								<jsp:param name="pageTo" value="/revit/list.html?key=${searchKey}&year=${param.year}&system=${param.system}
								&type=${param.type}&tagId=${tagId}&" />
					</jsp:include>



还是不行 

没有思路 只好查看 pagingNew.jsp 代码


<div id="Pagination" class="right flickr"></div>
<input id="pageNo" type="hidden" value="${data.pageNo}"style="width: 50px;" />
<input id="pageCount" type="hidden" value="${data.pageCount}"style="width: 50px;" />
<script type="text/javascript">
   var ctx = "${pageContext.request.contextPath}";
   var noNow= $("#pageNo").val();
	 
	   //alert("noNow"+$("#pageNo").val());
	   laypage({
		    cont: $('#Pagination'), //容器。值支持id名、原生dom对象,jquery对象,
		    pages:$("#pageCount").val(), //总页数
		    skip: true, //是否开启跳页
		    skin: '#20a5de',
		    groups: 10 ,//连续显示分页数





发现这个是分页后回填的div Pagination id两个分页如果一样的话  会冲掉一个


然后有一些html标签也要删掉   不然出现两处分页   但是点击第二个分页无效


修改后的 pagingNew1.jsp  代码



<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="jst" uri="http://www.jlrnt.net/jst"%>
<!--
<script type="text/javascript"
	src="<c:url value='/resources/thirdparty/laypage.js' />"></script>  这个js的也和上面重复 拿掉后才可以执行<pre code_snippet_id="1689328" snippet_file_name="blog_20160519_5_9706506" name="code" class="javascript">-->
<!-- 这个是回刷结果到最后的div里面 id 唯一 所以再加一个分页的话 要 和原来的Pagination区别下 --><div id="Pagination1" class="right flickr"></div> <!-- 下面三个控件 和pagingNew.jsp冲突 --><%-- <input id="urlTo" type="hidden" value="${param.pageTo1}" /> < <input id="pageNo" type="hidden" value="${data.pageNo}"style="width: 50px;" /><input id="pageCount" type="hidden" value="${data.pageCount}"style="width: 50px;" /> --%><script type="text/javascript"> var ctx = "${pageContext.request.contextPath}"; //var noNow= $("#pageNo").val(); //alert("noNow"+$("#pageNo").val()); laypage({ cont: $('#Pagination1'), //容器。值支持id名、原生dom对象,jquery对象, pages:$("#pageCount").val(), //总页数 skip: true, //是否开启跳页 skin: '#20a5de', groups: 10 ,//连续显示分页数 curr: $("#pageNo").val(), //当前页 jump: function(obj, first){ //触发分页后的回调 if(!first){ //点击跳页触发函数自身,并传递当前页:obj.curr //demo(obj.curr); var urlTo = $("#urlTo").val(); var url = ctx + urlTo ; //alert("obj.curr"+obj.curr); $("#pageNo").val(obj.curr); // alert("#pageNo"+$("#pageNo").val()); location.href=url+"pageNo="+$("#pageNo").val(); } }}); </script>
 



后端代码 和普通分页一样

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值