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 定义初始化数组函数
Sep 07 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
js窗口震动小程序分享
Nov 28 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 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 set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
两种php给图片加水印的实现代码
2020/04/18 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
如何手工释放资源
2013/12/15 面试题
办公室前台岗位职责
2014/01/04 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
教你用python实现12306余票查询
2021/06/30 Python
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript