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>
动态数据分页时,尾页不够分页条数,需填充具体高度,不然分页会把上一页的数据重复显示在最后一页中。