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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
Javascript 面向对象 继承
May 13 Javascript
jsonp原理及使用
Oct 28 Javascript
JS常用正则表达式总结
Nov 12 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
JavaScript 反射和属性赋值实例解析
Oct 28 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
js代码编写无缝轮播图
Sep 13 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获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
javascript比较文档位置
2008/04/08 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
js 函数性能比较方法
2020/08/24 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
利用python计算时间差(返回天数)
2019/09/07 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Python安装whl文件过程图解
2020/02/18 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
C# .NET面试题
2015/11/28 面试题
师德师风整改措施
2014/10/24 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
Java集成swagger文档组件
2021/06/28 Java/Android
MySQL常见优化方案汇总
2022/01/18 MySQL
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL