前端页面之——分页

一、Bootstrap大法

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

分页

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

<section>
    <ul class="nav nav-pills">
        <li class="nav-item"><a class="nav-link active" href="#NO1" data-toggle="pill">设计师</a></li>
        <li class="nav-item"><a href="#NO2" class="nav-link" data-toggle="pill">程序员</a></li>
        <li class="nav-item"><a href="#NO3" class="nav-link" data-toggle="pill">产品经理</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="NO1">色调配图算算术</div>
        <div class="tab-pane" id="NO2">代码调试改BUG</div>
        <div class="tab-pane" id="NO3">这里这里还有那里</div>
    </div>
</section>

二、jQuery大法

分页

1. 引入jQuery<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
2. html

  <section>
    <table cellspacing="0" cellpadding="0">
        <tr><th>人物</th><th>装备</th></tr>
        <tbody id="tableInfo">
        <tr><td>雷声托尔</td><td>神锤</td></tr>
        <tr><td>钢铁侠</td><td>动力装甲</td></tr>
        <tr><td>蜘蛛侠</td><td>蜘蛛丝</td></tr>
        <tr><td>美国队长</td><td>盾牌</td></tr>
        <tr><td>绿巨人浩克</td><td>超人的力量</td></tr>
        <tr><td>金刚狼</td><td>艾德曼合金爪</td></tr>
        <tr><td>夜魔侠</td><td>Billy Club</td></tr>
        <tr><td>恶灵骑士</td><td>不死之术</td></tr>
        <tr><td>蚁人</td><td>“刺针”光枪</td></tr>
        <tr><td>万磁王</td><td>磁力</td></tr>
        </tbody>
    </table>
    <div id="pagination">
        <a onclick="firstPage()">首页</a>
        <a onclick="prevPage()">上一页</a>
        <a onclick="pnextPage()">下一页</a>
        <a onclick="lastPage()">尾页</a>
      <span id="numPage"></span>
    </div>
  </section>

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<totalRow; i++){
        var hrow = tableInfo.rows[i];
        if( i>=startRow && i<lastRow ){
          hrow.style.color="#000";
          hrow.style.display="table-row";   // 将循环出来的每一行信息作为一个tr显示到页面
        }else{
          hrow.style.display="none";
        }
      }
    }

    $(function(){ firstPage(); });
    
    function firstPage(){
      var i = 1;
      pagination(i);
    }
    function prevPage(){
      var i= currentPage-1;
      if(i<1) i=currentPage;
      pagination(i);
    }
    function pnextPage(){
      var i= currentPage+1;
      if(i>totalPage) i= currentPage;
      pagination(i);
    }
    function lastPage(){
      var i = totalPage;
      pagination(i);
    }

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

分页

1. html

  <div id="tab1">
    <div class="menubox">
      <ul>
        <li id="one1" onclick="setTab('one',1,4)" class="hover">袁天罡</li>
        <li id="one2" onclick="setTab('one',2,4)" >李星云</li>
        <li id="one3" onclick="setTab('one',3,4)">姬如雪</li>
        <li id="one4" onclick="setTab('one',4,4)">温韬</li>
    </ul>
    </div>
      <div class="contentbox">
        <div id="con_one_1" >天罡绝</div>
        <div id="con_one_2" style="display:none">龙泉七星绝</div>
        <div id="con_one_3" style="display:none">幻音诀</div>
        <div id="con_one_4" style="display:none">盗圣，天捷星</div>
      </div>
  </div>

  <div id="tab2">
    <div class="menubox">
      <ul>
         <li id="two1" onclick="setTab('two',1,4)" class="hover">张子凡</li>
         <li id="two2" onclick="setTab('two',2,4)">陆林轩</li>
         <li id="two3" onclick="setTab('two',3,4)">黑白无常</li>
         <li id="two4" onclick="setTab('two',4,4)">蒋崇德</li>
      </ul>
    </div>
    <div class="contentbox">
       <div id="con_two_1" >至圣乾坤功、五雷天心诀</div>
       <div id="con_two_2" style="display:none">青莲剑歌-最后一式“惊虹”、乌柳心诀</div>
       <div id="con_two_3" style="display:none">千尸万毒掌、厉鬼勾魂 无常锁命、九幽玄天神功</div>
       <div id="con_two_4" style="display:none">玄冰掌</div>
    </div>
  </div>
<!-- 一个页面中如果使用多个TAB，就把上面的two复制,把two改成three -->

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;
        }