信鸽网

jquery实现html页面 div 假分页有原理有代码

  作者：bea

div假分页原理：填充后div的总高度 （1000px） 显示高度（100px） 则页面总数为10页 。当查看第二页时，显示的div高度为100 - 200之间，以此类推 看见页面在翻页 实则为div滚动条移动。 <div id="applications">显示数据集合</div> <style> #applications { /* width:500px;调整显示区的宽*/ height: 1592px; /*调整显示区的高

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>


动态数据分页时，尾页不够分页条数，需填充具体高度，不然分页会把上一页的数据重复显示在最后一页中。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: