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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
React自定义hook的方法
Jun 25 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和ACCESS写聊天室(三)
2006/10/09 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP 实现重载
2021/03/09 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
对Python 数组的切片操作详解
2018/07/02 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
文秘专业自荐信
2013/10/14 职场文书
优秀护士获奖感言
2014/02/20 职场文书
公益广告语集锦
2014/03/13 职场文书
汽车广告策划方案
2014/05/31 职场文书
应届大学生求职信
2014/07/20 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
优秀大学生自荐信
2015/03/26 职场文书
实施意见格式范本
2015/06/05 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
安全教育培训心得体会
2016/01/15 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server