前端页面之——分页

一、Bootstrap大法

这个不用写js,css，只要引入bootstrap就行了

分页

1. 引入bootstrap.css，bootstrap.js，jquery.js
2. html

    

        
设计师
        
程序员
        
产品经理
    
    

        
色调配图算算术
        
代码调试改BUG
        
这里这里还有那里
    

二、jQuery大法

分页

1. 引入jQuery
2. html

  

    

        
人物
装备
        

        
雷声托尔
神锤
        
钢铁侠
动力装甲
        
蜘蛛侠
蜘蛛丝
        
美国队长
盾牌
        
绿巨人浩克
超人的力量
        
金刚狼
艾德曼合金爪
        
夜魔侠
Billy Club
        
恶灵骑士
不死之术
        
蚁人
“刺针”光枪
        
万磁王
磁力
        
    
    

        首页
        上一页
        下一页
        尾页
      
    
  

3. js

    var tableInfo = document.getElementById("tableInfo");  // 获取table中的内容
    var totalRow = tableInfo.rows.length;  // 获取table行数
    //var cells = departmentsInfo.rows[0].cells.length;  // 获取列数
    var pagesize = 2;   // 每页两条
    var totalPage = Math.ceil(totalRow/pagesize);  // 计算出总页数=总条数/每页条数
    var currentPage;   // 当前页
    var startRow;
    var lastRow;

    // 定义一个换页的函数
    function pagination(i){
      currentPage = i;
      startRow = (currentPage-1)*pagesize;  //每页显示第一条数据的行数
      lastRow = currentPage*pagesize;  // 每页显示的最后一条数据的行数
      document.getElementById("numPage").innerHTML="第"+currentPage+"页";

      if(lastRow>totalRow){
           lastRow=totalRow;// 如果最后一页的最后一条数据显示的行数大于总条数，就让最后一条的行数等于总条数
      }
      //将数据遍历出来
      for(var i=0; i=startRow && itotalPage) i= currentPage;
      pagination(i);
    }
    function lastPage(){
      var i = totalPage;
      pagination(i);
    }

三、同一个页面，多个分页

分页

1. html

  

    

      

        
袁天罡
        
李星云
        
姬如雪
        
温韬
    
    
      

        
天罡绝
        
龙泉七星绝
        
幻音诀
        
盗圣，天捷星
      
  

  

    

      

         
张子凡
         
陆林轩
         
黑白无常
         
蒋崇德
      
    
    

       
至圣乾坤功、五雷天心诀
       
青莲剑歌-最后一式“惊虹”、乌柳心诀
       
千尸万毒掌、厉鬼勾魂 无常锁命、九幽玄天神功
       
玄冰掌
    
  

2. js

    function setTab(name,cur,n){
       for(i=1; i<=n; i++){
          var menu = document.getElementById(name+i);
          var con  = document.getElementById("con_"+name+"_"+i);

          menu.className=i==cur?"hover":"";
          con.style.display=i==cur ? "block":"none";
       }
    }

3. css

        body{
          margin:0;
          padding:0;
        }
        li {list-style:none;}
        #tab1,#tab2{
          width:500px;
          margin:20px;
          border:1px solid #088A68;
          border-radius: 3px;
        }
        .menubox ul{
          height:35px;
          margin:0px;
          padding:0px;
          text-align:center;
        }
        .menubox li{
          width:25%;
          line-height:35px;
          float:left;
          cursor:pointer;
          background-color:#088A68;
          color:#EFFBFB;
          font-size:14px;
        }
        .menubox li.hover{
          color:#F5F6CE;
          font-size:16px;
        }
        .contentbox{
          text-align:center;
          padding:80px;
          font-size:16px;
        }