jquery实现html页面 div 假分页有原理有代码


Posted in Javascript onSeptember 06, 2014

div假分页原理:填充后div的总高度 (1000px) 显示高度(100px) 则页面总数为10页 。当查看第二页时,显示的div高度为100 - 200之间,以此类推

看见页面在翻页 实则为div滚动条移动。

<div id="applications">显示数据集合</div>
<style> 
#applications 
{ 
/* width:500px;调整显示区的宽*/ 
height: 1592px; /*调整显示区的高*/ 
font-size: 14px; 
margin-top:23px; 
line-height: 20px; 
overflow-pageindex: hidden; 
overflow-y: hidden; 
word-break: break-all; 
} 
</style>
<script language="javascript"> 
var obj = document.getElementById("applications"); //获取内容层 
var pages = document.getElementById("pages"); //获取翻页层 
window.onload = function ()//重写窗体加载的事件 
{ 
var allpages = Math.ceil(parseInt(obj.scrollHeight) / parseInt(obj.offsetHeight)); //获取页面数量 
// pages.innerHTML = "<b>共" + allpages-1+ "页</b> "; //输出页面数量 
for (var i = 1; i <= allpages; i++) { 
if (i == 1) { 
pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">首页</a> "; 
} 
else{ 
pages.innerHTML += "<a href=\"javascript:showPage('" + i + "');\">" + i + "</a> "; 
} 
//循环输出第几页 
} 
} 
function showPage(pageINdex) { 
obj.scrollTop = (pageINdex - 1) * parseInt(obj.offsetHeight); //根据高度,输出指定的页 
} 
</script>

动态数据分页时,尾页不够分页条数,需填充具体高度,不然分页会把上一页的数据重复显示在最后一页中。

Javascript 相关文章推荐
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 #Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 #Javascript
jquery向上向下取整适合分页查询
Sep 06 #Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 #Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 #Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 #Javascript
js获取页面传来参数的方法
Sep 06 #Javascript
You might like
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php在线代理转向代码
2012/05/05 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python调用百度语音识别api
2018/08/30 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
pybind11在Windows下的使用教程
2019/07/04 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
python 两种方法删除空文件夹
2020/09/29 Python
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
教师自我评价范文
2013/12/16 职场文书
社区母亲节活动记录
2014/03/06 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书