一个JS分页效果代码

my_baby_2009

墨衍会员 · AI 创作全网分发码龄14年

关注

转载最新推荐文章于 2025-05-26 21:56:38 发布 3.6k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

这里分享一个不错的js分页代码。

代码中cpage是页面计数，应为全局变量，可以随处调用它；

totalpage是总页数。

与asp分页代码很类似，也是先取得记录总数，然后实现分页，基本的分页思路与原理还是相通的，感兴趣的朋友做个参考吧。

例子，js分页效果代码。

   <!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" lang="gb2312"> 
   
 <head> 
   
 <title>JS静态分页程序--www.jbxue.com</title> 
   
 </head> 
   
 <style type="text/css"> 
   
 a:link,a:visited,a:hover,.current,#info{ 
   
     border:1px solid #DDD; 
   
     background:#F2F2F2; 
   
     display:inline-block; 
   
     margin:1px; 
   
     text-decoration:none; 
   
     font-size:12px; 
   
     width:15px; 
   
     height:15px; 
   
     text-align:center; 
   
     line-height:15px; 
   
     color:#AAA; 
   
     padding:1px 2px; 
   
 } 
   
 a:hover{ 
   
     border:1px solid #E5E5E5; 
   
     background:#F9F9F9; 
   
 } 
   
 .current{ 
   
     border:1px solid #83E7E4; 
   
     background:#DFF9F8; 
   
     margin:1px; 
   
     color:#27CBC7; 
   
 } 
   
 #info{ 
   
     width:auto; 
   
 } 
   
 </style> 
   
 <body> 
   
 <div id="setpage"></div> 
   
 <script type="text/javascript"> 
   
 <!-- 
   
   var totalpage,pagesize,cpage,count,curcount,outstr; 
   
   //
   初始化 
   
 cpage = 1; 
   
 totalpage = 56; 
   
 pagesize = 10; 
   
 outstr = ""; 
   
   function gotopage(target) 
   
 {     
   
     cpage = target;        
   //
   把页面计数定位到第几页 
   
     setpage(); 
   
   //
   reloadpage(target);    //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况 
   
 } 
   
   function setpage() 
   
 { 
   
   if(totalpage<=10){        
   //
   总页数小于十页 
   
   for (count=1;count<=totalpage;count++) 
   
         {    
   if(count!=cpage) 
   
             { 
   
                 outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 
   
             }
   else{ 
   
                 outstr = outstr + "<span class='current' >"+count+"</span>"; 
   
             } 
   
         } 
   
     } 
   
   if(totalpage>10){  
   //
   总页数大于十页 
   
   if(parseInt((cpage-1)/10) == 0) 
   
         {             
   
   for (count=1;count<=10;count++) 
   
             {    
   if(count!=cpage) 
   
                 { 
   
                     outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 
   
                 }
   else{ 
   
                     outstr = outstr + "<span class='current'>"+count+"</span>"; 
   
                 } 
   
             } 
   
             outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>"; 
   
         } 
   
   else 
   if(parseInt((cpage-1)/10) == parseInt(totalpage/10)) 
   
         {     
   
             outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>"; 
   
             for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++) 
   
             {    if(count!=cpage) 
   
                 { 
   
                     outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 
   
                 }
   else{ 
   
                     outstr = outstr + "<span class='current'>"+count+"</span>"; 
   
                 } 
   
             } 
   
         } 
   
   else 
   
         {   www.jbxue.com
   
             outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>"; 
   
             for (count=parseInt((cpage-1)/10)*10+1;count<=parseInt((cpage-1)/10)*10+10;count++) 
   
             {         
   
                 if(count!=cpage) 
   
                 { 
   
                     outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 
   
                 }
   else{ 
   
                     outstr = outstr + "<span class='current'>"+count+"</span>"; 
   
                 } 
   
             } 
   
             outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>"; 
   
         } 
   
     }     
   
     document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<\/span>" + outstr + "<\/div>"; 
   
     outstr = ""; 
   
 } 
   
 setpage();  
   //
   调用分页 
   
 //
   --> 
   
 </script> 
   
 </body> 
   
 </html>