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

ajax + laypage实现分页 ajax + laypage实现分页 使用laypage实现分页,官网给出的实例如下,由于官网没有从后台获取数据,只是在前端构造了一些数据,在我们实际应用中可能会踩坑,在此做个记录。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</titl... 阅读详情

之前用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>




后端代码 和普通分页一样

Layui表格配合Laypage分页插件遇见的问题及解决办法 (本文编写30分钟,预计阅读时间5分钟)本文前提:    项目采用的是Layui来渲染表格,由于表格原生的分页并不是那么友好(要查出所有的数据然后前端进行分页,本项目数据量有点大,其次前端分页是比较占性能的一种手段)所以不采用前端分页的方法,然后选择官网给出的Laypage分页插件来给予分页支持。遇见的问题:分页的时候表格内容刷新了,而分页一直停留在第1页解决办法1、页面加载的时候从后台获取数据f... 阅读详情

相关推荐

APS生产排程系统——ERP、MES、APS系统的关联和区别

APS生产排程系统——ERP、MES、APS系统的关联和区别

这里有一只小马吖 2万+

layui 之 laypage分页插件

理论 通过核心方法:laypage.render(options) 来设置基础参数,该核心接口的参数如下表所示: 参数选项 说明 类型 类型 elem 指向存放分页的容器,值可以是容器ID、DOM对象。如:1. elem: ‘id’ 注意:这里不能加 # 号 2. elem: document.getElementById(‘id’) String/Object - count 数据总数。一般通过服务端得到 Number - limit 每页显示的条数。laypage将会借助 cou

哈 1万+

告别低效!用ADS仿真带你一步步搭建一个两路对称Doherty功放(含设计要点)

本文详细介绍了如何使用ADS仿真工具一步步搭建两路对称Doherty功放,涵盖设计要点与优化技巧。通过解析负载调制机制、阻抗变换等核心原理,结合5G基站等应用场景,帮助工程师提升功放效率与线性度。特别针对GaN管件的Doherty功放,在3.5GHz频段实现高效性能。

weixin_31783001的博客 396

layui的laypage多个实例上下页码实现同步显示

比如文章列表的上面和下面同时显示,他们显示是两个地方都显示,但是数据得保持一致 可能我的问题描述不是特别简易,简单来说就是,分页页面的上下都有页码的展示,但是他们又是两个实例,没法实行同步。 我原先的思路是,在上页码的分页操作时,让他对下页码的分页进行控制。反之,就是下页码进行操作时,也同时让他对上页码进行控制。但是这样行不通。原因会在下面代码引入后尽行解释。 function s...

sunmeng_sunmeng的博客 1069

Unity 调用安卓内部安装apk

一、申请权限 应用内安装其他应用的权限属于特殊权限,需要在特殊申请。 Uri packageURI = Uri.parse("package:" + mContext.getPackageName()); Intent intent = new Intent(Settings.ACTION_MANAGE_UNKNOWN_APP_SOURCES, packageURI); startA...

BDDNH的博客 1240

深入解析安卓性能分析工具systrace/atrace的使用技巧与实战场景

本文深入解析了安卓性能分析工具systrace/atrace的核心使用技巧与实战场景。文章澄清了环境搭建的常见误区,详细拆解了命令参数,并通过列表卡顿、启动优化等具体案例,手把手指导开发者利用这些工具精准定位性能瓶颈,提升应用流畅度。

yyy34的博客 240

${param.pageNo}是什么意思?

1、${param.id};与request.getParameter(“id”);功能相同 2、${param.id};获取输入的参数id,也可理解为的是form或者div表单里的ID。 request.getParameter("id");是获取数据库中对应的编号ID。 3、${param.id}与${ requestScope.book.id }两者的区别: (1)requestScope是...

DKPT的博客 1326

人工智能训练师三级考试题型全解析|190道真题样例+30天备考路线

人工智能训练师三级考试并不神秘:理论考190道选择题(刷题就能过),实操考代码+方案设计(练练就会)。核心是花时间——30天系统备考,足以从容通过。如果你想从零开始系统备考,覆盖所有考点和实操技能,欢迎查看我的专栏:📖《人工智能训练师三级·从零到拿证完全指南》80篇系统化内容,覆盖报名、备考、冲刺、拿证全流程六大模块知识点逐个击破,每个考点都讲透实操代码题手把手教学,附带完整参考代码高频考点速记 + 易错题精讲 + 3套模拟试卷30天备考计划 + 冲刺复习策略。

白话机器学习 6080

学习使用layPage, 多功能JS分页组件/插件的方法

学习使用layPage, 多功能JS分页组件/插件的方法

徊忆羽菲 1365

基于YOLOv8的表面裂痕等缺陷检测:深度学习与UI界面的实践

本文详细介绍了如何使用YOLOv8进行表面裂痕等缺陷检测,并结合图形用户界面展示检测结果。通过YOLOv8的强大能力,我们可以实现高效、准确的表面缺陷检测,提升工业产品的质量控制水平。未来,随着深度学习技术和数据集的不断发展,表面缺陷检测的精度和速度将不断提升,应用领域也将进一步拓展。希望本文的实践能够为深度学习在工业检测领域的应用提供一些启示。

YOLO 550

【Power Compiler手册】4.saif文件

功耗计算的准确性取决于切换活动数据的准确性。这些数据是通过使用RTL仿真或门级仿真生成的,并存储在SAIF文件中。在执行功耗优化和分析之前,应该使用SAIF文件来反标设计对象上的切换活动信息。SAIF是由Synopsys支持的ASCII格式,用于促进不同Synopsys工具之间的信息交换(参见IEEE 1801标准,附录J)。使用`read_saif`命令读取SAIF文件,使用`write_saif`命令写出SAIF文件。有关更多信息,请参见`read_saif`和`write_saif`命令的手册页。

QRBQ 2186

PHP开发中的分页显示数据实现方法及基本原理详解

在Web开发中,分页显示数据是非常常见的功能。无论是展示文章列表、产品列表还是查询结果等情况,分页都是提升用户体验的重要手段。如果你使用PHP开发,那我今天就好好讲讲怎么去实现分页显示。一、基本原理在开始写代码之前,我们先得了解分页显示的基本思路。假设我们有一个包含很多条数据的查询结果

SuWdGTAc的博客 576

基于STM32F1XX 、HAL库的LTR-303ALS-01 环境光传感器驱动应用C语言程序设计

printf("制造商ID: 0x%02X\r\n", LTR303_ReadManufacID());printf("器件ID: 0x%02X\r\n", LTR303_ReadPartID());LTR-303ALS-01是一款数字环境光传感器(ALS),由Lite-On公司生产。printf("LTR-303ALS初始化失败!printf("LTR-303ALS初始化成功!printf("数据无效\r\n");* @param mode: 0-待机, 1-激活。

PP_Cottage的博客 1033

laypage 实现动态分页

LayUI实现动态分页 layPage是一款多功能的js分页组件,即适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载,并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库,直接拿来用即可,它的接口继承了layui系列组件的一贯简洁,极易上手。 在实现之前,首先要知道layPage的工作原理...

qq_35530339的博客 1240

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

layPage分页示例

效果如下: HTML代码: 引入:   //总页数 //当前页 //分页容器显示的地方 js代码: var totalNum= document.getElementById('total').value; var nums = 5; //每页出现的数量 var pages = Math.ceil(totalNum/nums); //得到总页数 var cu

钟渊博客 1万+

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

快速使用laypage分页demo

layPage 致力于提供极致的分页逻辑,既可轻松胜任异步分页,也可作为页面刷新式分页。自 layui 2.0 开始,无论是从核心代码还是API设计,layPage 都完成了一次蜕变。清爽的UI、灵活的排版,极简的调用方式,这一切的优质元素,都将毫无违和感地镶嵌在你的页面之中。 <!DOCTYPE html> <html> <head> <me...

小白菜,追逐吧,坚持吧! 1529

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

laypage分页控件的使用

laypage 多功能JavaScript分页组件 v1.3的使用和代码说明 &amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;amp;gt; &

Nemo的笔记本 641

layui laypage 实现刷新后还在当前页面

在使用layui 的laypage时 因为是使用ajax获取分页数据

weixin_42571089的博客 1850

VUEJS 实战教程第三章,利用laypage插件实现分页

VUEJS 实战教程第三章,利用laypage插件实现分页前言在上两章的工作中,我们顺利的实现了首页的渲染,但是,只是渲染了一页数据而已.我们可能需要渲染更多的数据,这时候,我们就有必要考虑分页了.分页有很多种方式,比如异步加载的分页方式.然而对于没有太多使用前端模版框架的朋友来说,一上来就使用这种方式,可能稍微有点难度.因此,我们这章的分页实现,是基于普通的链接分页的方式完成的.在我们有了更多的前

FungLeo's Blog 1万+

layui 通过laytpl模板,以及laypage分页实现

一、引用js依赖 jquery-1.11.3.min.js ,layui.all.js,json2.js 二、js分页方法封装(分页使用模板laytpl) 1、模板渲染 /** * 分页模板的渲染方法 * @param templateId 分页需要渲染的模板的id * @param resultContentId 模板渲染后显示在页面的内容的容器id...

aomiano55778的博客 688

分页一 layui.laypage 使用记录

官网地址:https://www.layui.com/doc/modules/laypage.html 前端代码 <link rel="stylesheet" href="~/Content/layui/css/layui.css" media="all"> <div id="contaniner"> <section> ...

BQL_Email的专栏 961

使用Laypage进行分页

使用Laypage进行分页Laypage是一款简单,方便的分页插件,无需写过多的js代码只需要向后台传入当前页数(由于本人偷懒在JS中写死了pageSize)<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www

wmh13262227870的博客 2480

layui的两种分页:laypage的div分页和table表格分页

layui的两种分页:laypage的div分页和table表格分页我用的是springboot+mybatis1、pom.xml中引入依赖2、controller层3、xmlHTML页面(table表格分页)HTML页面(table表格分页)HTML页面(laypage的div分页)HTML页面(laypage的div分页)效果图 我用的是springboot+mybatis 1、pom.xml...

weixin_45680042的博客 4751

laypage分页器

index.js: $( function (){ var nums = 5; //每页出现的数量 var thisDate = function(curr,data){ //此处只是演示,实际场景通常是返回已经当前页已经分组好的数据 var str = '', last = 4;

powderhose的博客 734

Layui 20 laypage 分页组件

layui laypage 分页组件

monian187的博客 1813

使用laypage分页

在开发的时候经常遇到分页比较麻烦,尤其对于一个后端程序猿来说,但是这个问题不能不解决,于是找了一个分页的控件用用,记录在下,以便以后使用。 首先看下laypage网站的简介,然后你就发现很简单的使用了。 以下是网站中使用的简单例子: //以下将以jquery.ajax为例,演示一个异步分页 $.getJSON('test/demo1.json', {curr: 6}, function(

FreshMan 2万+
上一篇: 删除vi编辑产生的.swp文件
下一篇: 数据库连接池C3P0最常用配置
琅琊山二当家
博客等级 码龄18年 447粉丝 322原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值