论坛首页 → Web前端技术论坛 →

javascript 实现分页

浏览 7091 次
锁定老帖子 主题：javascript 实现分页
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • jiangzhen1984
  • 等级: 初级会员
  • 性别:
  • 文章: 23
  • 积分: 92
  • 来自: 北京
   发表时间：2007-05-22  
这是我参考别人的分页后
自己写了个跟简单的分页

 
js 代码
  1. < html>  
  2.   
  3. < body>  
  4.   
  5. < span id=contents>

      
  6. < span id=splitpage>  
  7.   
  8. < script type="text/javascript">  
  9.   
  10. _currentPage = 2;//设置当前页码  
  11. _indexContainer = document.all.splitpage;//设置存放分页索引号的容器  
  12. _contentContainer = document.all.contents;//设置存放分页内容的容器  
  13. _totalPages = 0;//初始化总页数  
  14. (function pageLoad() {  
  15.     _indexContainer.innerHTML =pageNo(100,2,10,7).join(" ");  
  16.     var str="getR("+3+")";  
  17. goToPage(100, 3, 10,7,str);  
  18. })();  
  19.   
  20. //返回页码对象  
  21. function pageNo(counts, currentPage, perPage,showIndex,str) {  
  22.     var perPage = perPage ? perPage : 5;

      
  23.   
  24.     var pages=0;  
  25.     pages=counts/perPage+1;  
  26.     var pageIndex = [];  
  27.     //插入第一页标识   
  28.     if(currentPage==1){  
  29.         pageIndex.push("《《 《 ");  
  30.     }else{//注意这里是 A标签 我把前面的<去掉了 因为 加上后会让系统会自动识别成连接无法正常显示代码  
  31.         var str1="a href=\"javascript:goToPage("+counts+", "+1+", "+perPage+","+showIndex+",'"+str+"')\">《《 a href=\"javascript:goToPage("+counts+", "+(currentPage-1>0?currentPage-1:1)+", "+perPage+","+showIndex+",'"+str+"')\">《 ";  
  32.         pageIndex.push(str1);  
  33.     }  
  34.   
  35.     var cyclCousnts=parseInt(showIndex/2);  
  36.       
  37. for(var i=1;i<=showIndex;i++){  
  38.         var tmpPage=currentPage>=cyclCousnts?currentPage-cyclCousnts+i-1:i;  
  39.         if(currentPage==tmpPage)  
  40.             pageIndex.push("font color=\"red\">"+tmpPage+"");  
  41.         else if(tmpPage>pages)  
  42.             continue;  
  43.         else if(tmpPage<1)  
  44.             continue;  
  45.         else{//注意这里是 A标签 我把前面的<去掉了 因为 加上后会让系统会自动识别成连接无法正常显示代码  
  46.             var str1="a href=\"javascript:goToPage("+counts+", "+tmpPage+", "+perPage+","+showIndex+",'"+str+"')\">"+tmpPage+"";  
  47.             pageIndex.push(str1);  
  48.         }  
  49.     }  
  50.     if(currentPage==pages){  
  51.         pageIndex.push(" 》 》》");  
  52.     }else{//注意这里是 A标签 我把前面的<去掉了 因为 加上后会让系统会自动识别成连接无法正常显示代码  
  53.         var str1="a href=\"javascript:goToPage("+counts+", "+(currentPage+1>pages?currentPage:currentPage+1)+", "+perPage+","+showIndex+",'"+str+"')\">》  a href=\"javascript:goToPage("+counts+", "+pages+", "+perPage+","+showIndex+",'"+str+"')\">》》 ";  
  54.         pageIndex.push(str1);  
  55.     }  
  56.       
  57.     return pageIndex;  
  58. }  
  59.   
  60.   
  61. function goToPage(counts, currentPage, perPage,showIndex,str) {  
  62.     _contentContainer.innerHTML = eval(str);  
  63.     _indexContainer.innerHTML = pageNo(counts, currentPage, perPage,showIndex,str).join(" ");  
  64. }  
  65.   
  66. function getRecord(currentPage){  
  67.     return "the current pagaea  is:"+currentPage;  
  68. }  
  69.   
  70. function getR(currentPage){  
  71.     return "the current page  by eval is:"+currentPage;  
  72. }  
  73.   
  74. < /script>  
  75. < /body>  
  76. < /html>  
返回顶楼
         
  • hgq0011
  • 等级: 一钻会员
  • 性别:
  • 文章: 961
  • 积分: 1017
  • 来自: 广州
   发表时间：2007-05-22  
能够有一个很好的demo演示吗？
排版能更好一点吗？
返回顶楼
          回帖地址
0 请登录后投票
  • liuzongan
  • 等级: 初级会员
  • 性别:
  • 文章: 103
  • 积分: 20
  • 来自: 北京
   发表时间：2007-05-28  
怎么显示不出来职?
返回顶楼
          回帖地址
0 请登录后投票
  • 笨笨狗
  • 等级: 四星会员
  • 性别:
  • 文章: 260
  • 积分: 377
  • 来自: 昆明
   发表时间：2007-05-28  
ajax分页，可以参考下我的文章：

http://www.iteye.com/topic/79869

实现了三种数据获取方式，利用Prototype框架实现OO对象设计，欢迎指正：）
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics