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程序设计有所帮助。