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中的函数
Jan 22 Javascript
js 图片缩放(按比例)控制代码
May 27 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
js实现多图和单图上传显示
Dec 18 Javascript
JS实现放大镜效果
Sep 21 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
咖啡与水的关系
2021/03/03 冲泡冲煮
打造计数器DIY三步曲(上)
2006/10/09 PHP
php学习笔记之 函数声明
2011/06/09 PHP
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
Vue-resource实现ajax请求和跨域请求示例
2017/02/23 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
django之自定义软删除Model的方法
2019/08/14 Python
python logging设置level失败的解决方法
2020/02/19 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
岗位职责定义及内容
2013/11/08 职场文书
学校课外活动总结
2014/05/08 职场文书
植树节口号
2014/06/21 职场文书
联片教研活动总结
2014/07/01 职场文书
个人主要事迹材料
2014/08/26 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2015年保送生自荐信
2015/03/24 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
JavaScript流程控制(循环)
2021/12/06 Javascript
全新239军机修复记
2022/04/05 无线电