js实现ajax分页完整实例
本文实例讲述了js实现ajax分页的方法。分享给大家供大家参考，具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>UntitledDocument</title>
</head>
<body>
<styletype="text/css">
*{margin:0;padding:0}
.ajax_page{padding:1px4px;border:1pxsolid#e60011;margin:02px;text-decoration:none;color:#666666;font-family:mingliu;font-size:11px;height:14px;line-height:14px;float:left;font-weight:bold;display:block;}
span.currentPage{padding:2px4px;color:#666666;font-size:11px;height:14px;line-height:14px;float:left;display:block;font-weight:bold;font-family:mingliu}
</style>
<styletype="text/css">
*{margin:0;padding:0}
.ajax_page{padding:1px4px;border:1pxsolid#e60011;margin:02px;text-decoration:none;color:#666666;font-family:mingliu;font-size:11px;height:14px;line-height:14px;float:left;font-weight:bold;display:block;}
span.currentPage{padding:2px4px;color:#666666;font-size:11px;height:14px;line-height:14px;float:left;display:block;font-weight:bold;font-family:mingliu}
</style>
<divid="demo"style="width:500px;margin:10pxauto;"></div>
<scripttype="text/JavaScript">
<!--
functioninitPage(totalPages,curPage,middlePage,Container){
varhtmlstr='';
if(curPage>totalPages){curPage=totalPages}
if(curPage<0){curPage=1}
varcurBigPage=Math.ceil(curPage/middlePage)
//当前所在的屏数,如curPage=21,总页数为50页时,屏数就是3（当前是第几屏）实际上是这种形式：Math.ceil(curPage*pageSize/pageSize*perPage)
vartotalBigPage=Math.ceil(totalPages/middlePage);//总的屏数
if(totalPages<middlePage){
for(vari=1;i<totalPages+1;i++){
if(i==curPage){
htmlstr+='<spanclass="currentPage">'+i+'</span>';
}else{
htmlstr+='<ahref="javascript:void(0)"mce_href="javascript:void(0)"onclick="initPage('+totalPages+','+i+','+middlePage+',/''+container+'/');getPageData('+i+');returnfalse"class="ajax_page">'+i+'</a>';
}
}
}else{
varcurBigStart=(curBigPage-1)*middlePage+1;
if(curBigPage==totalBigPage){
varcurBigEnd=totalPages;
}else{
varcurBigEnd=curBigPage*middlePage;
}
if(curBigPage!=1){//前一屏
varpreCurPage=curBigStart-middlePage;
htmlstr+='<ahref="javascript:void(0)"mce_href="javascript:void(0)"onclick="initPage('+totalPages+','+preCurPage+','+middlePage+',/''+container+'/');getPageData('+preCurPage+');returnfalse"class="ajax_page">pre</a>';
}
for(vari=curBigStart;i<=curBigEnd;i++){
if(i==curPage){
htmlstr+='<spanclass="currentPage">'+i+'</span>';
}else{
htmlstr+='<ahref="javascript:void(0)"mce_href="javascript:void(0)"onclick="initPage('+totalPages+','+i+','+middlePage+',/''+container+'/');getPageData('+i+');returnfalse"class="ajax_page">'+i+'</a>';
}
}
if(curBigPage!=totalBigPage){//后一屏
varnextCurPage=curBigStart+middlePage;
htmlstr+='<ahref="javascript:void(0)"mce_href="javascript:void(0)"onclick="initPage('+totalPages+','+nextCurPage+','+middlePage+',/''+container+'/');getPageData('+nextCurPage+');returnfalse"class="ajax_page">next</a>';
}
}
document.getElementById('demo').innerHTML=htmlstr
}
functiongetPageData(i){
alert('现在取第'+i+'页数据');//ajaxgetdata
}
initPage(50,2,10,'demo');
//--></script>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。