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 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
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实现微信公众平台音乐点播
2014/03/20 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
对联广告js flash激活
2006/10/19 Javascript
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python判断windows系统是32位还是64位的方法
2015/05/11 Python
python自动裁剪图像代码分享
2017/11/25 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
市级三好学生事迹材料
2014/08/27 职场文书
校园广播稿100字
2014/10/06 职场文书
2014年团工作总结
2014/11/27 职场文书
初婚未育证明样本
2015/06/18 职场文书
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL
python APScheduler执行定时任务介绍
2022/04/19 Python
使用CSS实现按钮边缘跑马灯动画
2023/05/07 HTML / CSS