js实现ajax分页完整实例
程序员文章站
2022-10-31 12:12:54
本文实例讲述了js实现ajax分页的方法。分享给大家供大家参考,具体如下:
本文实例讲述了js实现ajax分页的方法。分享给大家供大家参考,具体如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>untitled document</title> </head> <body> <style type="text/css"> *{margin:0;padding:0} .ajax_page{padding:1px 4px;border:1px solid #e60011;margin:0 2px;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:2px 4px;color:#666666;font-size:11px;height:14px;line-height:14px;float:left;display:block;font-weight:bold;font-family:mingliu} </style> <style type="text/css"> *{margin:0;padding:0} .ajax_page{padding:1px 4px;border:1px solid #e60011;margin:0 2px;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:2px 4px;color:#666666;font-size:11px;height:14px;line-height:14px;float:left;display:block;font-weight:bold;font-family:mingliu} </style> <div id="demo" style="width:500px;margin:10px auto;"></div> <script type="text/javascript"> <!-- function initpage(totalpages,curpage,middlepage,container){ var htmlstr = ''; if(curpage > totalpages) {curpage = totalpages} if(curpage < 0) {curpage = 1} var curbigpage = math.ceil(curpage/middlepage) //当前所在的屏数,如curpage=21,总页数为50页时,屏数就是3(当前是第几屏)实际上是这种形式:math.ceil(curpage*pagesize/pagesize*perpage) var totalbigpage = math.ceil(totalpages/middlepage); //总的屏数 if( totalpages < middlepage){ for(var i=1;i<totalpages+1;i++){ if(i == curpage){ htmlstr += '<span class="currentpage">' + i + '</span>'; }else{ htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initpage('+ totalpages+','+i+','+middlepage +',/''+ container+'/');getpagedata('+ i+');return false" class="ajax_page">'+i +'</a>'; } } }else{ var curbigstart = (curbigpage-1)*middlepage + 1; if(curbigpage == totalbigpage){ var curbigend = totalpages; }else{ var curbigend = curbigpage * middlepage; } if(curbigpage != 1){ //前一屏 var precurpage = curbigstart - middlepage; htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initpage('+ totalpages+','+precurpage+','+middlepage +',/''+ container+'/');getpagedata('+ precurpage +');return false" class="ajax_page">pre</a>'; } for(var i=curbigstart;i<=curbigend;i++){ if(i == curpage){ htmlstr += '<span class="currentpage">' + i + '</span>'; }else{ htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initpage('+ totalpages+','+i+','+middlepage +',/''+ container+'/');getpagedata('+ i +');return false" class="ajax_page">' + i + '</a>'; } } if(curbigpage != totalbigpage){ //后一屏 var nextcurpage = curbigstart + middlepage; htmlstr += '<a href="javascript:void(0)" mce_href="javascript:void(0)" onclick="initpage('+ totalpages+','+nextcurpage+','+middlepage +',/''+ container+'/');getpagedata('+ nextcurpage + ');return false" class="ajax_page">next</a>'; } } document.getelementbyid('demo').innerhtml = htmlstr } function getpagedata(i){ alert('现在取第 '+i+ ' 页数据'); //ajax get data } initpage(50,2,10,'demo'); // --></script> </body> </html>
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇: Django中的Ajax
下一篇: 一个简单Ajax类库及使用方法实例分析