jquery实现html页面 div 假分页有原理有代码
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>
动态数据分页时,尾页不够分页条数,需填充具体高度,不然分页会把上一页的数据重复显示在最后一页中。
相关文章
jquery根据name取得select选中的值实例(超简单)
下面小编就为大家分享一篇jquery根据name取得select选中的值实例(超简单),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
Tab页界面 用jQuery及Ajax技术实现(php后台)
到了B/S开发时代,网页前端布局也把Tab页的布局形式吸收了过来。特别是和Ajax技术结合起来,可以更充分发挥Tab页的良好表现力和数据缓存的优势,是一种良好的网页布局形式2011-10-10
jQuery实现checkbox全选、反选及删除等操作的方法详解
这篇文章主要介绍了jQuery实现checkbox全选、反选及删除等操作的方法,结合实例形式形式详细分析了jQuery针对checkbox多选按钮常见批量操作相关实现技巧,需要的朋友可以参考下2019-08-08
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Easy Slider 是一个滑动门插件,支持任何图片或内容,当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制。2010-06-06
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
分享一个jquery插件:实现类似淘宝上鼠标经过图片右侧显示大图的效果,感兴趣的朋友可以研究下,或许对你学习jquery有所帮助,千万不要错过啊2013-02-02
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
这篇文章主要介绍了jQuery悬停文字提示框插件jquery.tooltipster.js用法,涉及jQuery文字提示框插件的引入与调用实现技巧,非常简单实用,需要的朋友可以参考下2016-07-07
javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足
用onpropertychange,oninput事件解决onchange事件的不足,需要的朋友可以参考下。2010-11-11


最新评论