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(二)事件机制(2)
Dec 06 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
详解JS面向对象编程
Jan 24 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 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文件锁函数flock()详细介绍
2014/11/18 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
javascript验证身份证号
2015/03/03 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
js实现文字截断功能
2016/09/14 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
基层干部十八大感言
2014/01/19 职场文书
解除合同协议书
2014/04/17 职场文书
社区活动总结报告
2014/05/05 职场文书
大学生学期个人总结
2015/02/12 职场文书
联欢会开场白
2015/06/01 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android