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广告代码
May 30 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
jQuery手风琴的简单制作
May 12 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
Javascript中parseInt的正确使用方式
Oct 17 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调用MySQL的存储过程的实现代码
2008/08/12 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
Python生成不重复随机值的方法
2015/05/11 Python
python处理大数字的方法
2015/05/27 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python中kmeans聚类实现代码
2018/02/23 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
二年级数学教学反思
2014/01/21 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
中秋手机店促销方案
2014/06/16 职场文书
培训后的感想
2015/08/07 职场文书
春节随笔
2015/08/15 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库