前端页面之——分页

一、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>
  1. 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 -->
  1. 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";
       }
    }
  1. 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;
        }
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,071评论 1 45
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,391评论 0 106
  • 发现麦子学院的课程还是感觉很好的。以后就按这个写文集了。希望能坚持下去。 HTML+CSS基础入门 1.课程介绍 ...
    biggerworld阅读 1,018评论 0 1
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,185评论 1 52