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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
如何快速上手Vuex
Feb 14 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
使用javascript解析二维码的三种方式
Nov 11 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
AM/FM收音机的安装与调试
2021/03/02 无线电
php 传值赋值与引用赋值的区别
2010/12/29 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
Vue实现购物车功能
2017/04/27 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python无序链表删除重复项的方法
2020/01/17 Python
python super函数使用方法详解
2020/02/14 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
PHP经典面试题
2016/09/03 面试题
给水工程专业毕业生自荐信
2014/01/28 职场文书
大学生就业策划书范文
2014/04/04 职场文书
村委会贫困证明范文
2014/09/21 职场文书
2014年保管员工作总结
2014/11/18 职场文书
交通事故代理词范文
2015/05/23 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
三好学生竞选稿范文
2019/08/21 职场文书