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 相关文章推荐
JavaScript 事件系统
Jul 22 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
小程序自定义圆形进度条
Nov 17 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魔法函数与魔法常量使用介绍
2017/07/23 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
JavaScript模拟push
2016/03/06 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python中zip()函数用法实例教程
2014/07/31 Python
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python自动重试HTTP连接装饰器
2015/04/28 Python
Python中Continue语句的用法的举例详解
2015/05/14 Python
python @classmethod 的使用场合详解
2019/08/23 Python
Python datetime包函数简单介绍
2019/08/28 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
python安装后的目录在哪里
2020/06/21 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
商场中秋节活动方案
2014/02/07 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
清明节主题班会
2015/08/14 职场文书
创业计划书之家政服务
2019/09/18 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers