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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
vue 项目build错误异常的解决方法
Apr 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逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
JSONP之我见
2015/03/24 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
JS实现li标签的删除
2019/04/12 Javascript
图解javascript作用域链
2019/05/27 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
自考毕业自我鉴定范文
2013/10/27 职场文书
医大实习自我鉴定
2013/12/07 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
开工仪式主持词
2014/03/20 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
食品安全演讲稿
2014/09/01 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
公务员考察材料范文
2014/12/23 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python