jquery实现html页面 div 假分页有原理有代码
div假分页原理:填充后div的总高度(1000px)显示高度(100px)则页面总数为10页。当查看第二页时,显示的div高度为100-200之间,以此类推
看见页面在翻页实则为div滚动条移动。
<divid="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>
<scriptlanguage="javascript">
varobj=document.getElementById("applications");//获取内容层
varpages=document.getElementById("pages");//获取翻页层
window.onload=function()//重写窗体加载的事件
{
varallpages=Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj.offsetHeight));//获取页面数量
//pages.innerHTML="<b>共"+allpages-1+"页</b>";//输出页面数量
for(vari=1;i<=allpages;i++){
if(i==1){
pages.innerHTML+="<ahref=\"javascript:showPage('"+i+"');\">首页</a>";
}
else{
pages.innerHTML+="<ahref=\"javascript:showPage('"+i+"');\">"+i+"</a>";
}
//循环输出第几页
}
}
functionshowPage(pageINdex){
obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);//根据高度,输出指定的页
}
</script>
动态数据分页时,尾页不够分页条数,需填充具体高度,不然分页会把上一页的数据重复显示在最后一页中。