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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
深入解析php模板技术原理【一】
2008/01/10 PHP
php的curl实现get和post的代码
2008/08/23 PHP
PHP 组件化编程技巧
2009/06/06 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
jQuery之折叠面板的深入解析
2013/06/19 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
实现两个文本框同时输入的实例
2017/09/25 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
python openpyxl模块的使用详解
2021/02/25 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
中学生国旗下讲话稿
2014/04/26 职场文书
委托书格式
2014/08/01 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
检讨书范文
2015/01/27 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
python flask开发的简单基金查询工具
2021/06/02 Python