期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

纯js代码实现分页

随着近几年前端行业的迅猛发展,各种层出不穷的新框架和新方法让我们有点眼花缭乱。最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		 <style type="text/css">      #idData {color: #085820;border: solid;text-align: center;}      a{text-decoration: none;}   </style>  </head>  <body onLoad="goPage(1,10);">      <table id="idData" width="70%">                  <tr><td>01</td><td>1</td><td>1</td><td>通杀!哈登本季对29队全轰30+ 成历史第一人</td></tr>          <tr><td>02</td><td>2</td><td>2</td><td>哈登与字母哥势均力敌 27日直接对决或决定归属</td></tr>          <tr><td>03</td><td>3</td><td>3</td><td>湖人遭雄鹿双杀近10战1胜 詹皇字母哥双双缺阵</td></tr>          <tr><td>04</td><td>4</td><td>4</td><td>科比支持湖人追求浓眉哥:湖人这三人远不如他</td></tr>          <tr><td>05</td><td>5</td><td>5</td><td>19时吉林vs福建 王哲林PK波兰神塔</td></tr>          <tr><td>06</td><td>6</td><td>6</td><td>外援遭辱骂愤然离场 CBA球迷素质再被摆上台面</td></tr>          <tr><td>07</td><td>7</td><td>7</td><td>山东男篮迎生死战 主帅提三要点尤其防好吴冠希</td></tr>          <tr><td>08</td><td>8</td><td>8</td><td>刘炜遗憾没能帮上海更多 微笑给球迷转身却痛哭</td></tr>          <tr><td>09</td><td>9</td><td>9</td><td>卡纳瓦罗亲自上阵示范 主力阵容浮现</td></tr>          <tr><td>010</td><td>10</td><td>10</td><td>利物浦大将告诉你什么叫死敌:挖我的人给曼联?没门</td></tr>          <tr><td>011</td><td>11</td><td>11</td><td>喉舌:6000万欧+浮动条款 巴萨正式报价欧洲金童</td></tr>          <tr><td>012</td><td>12</td><td>12</td><td>皇马曾经害怕里昂 我的国米配得上三冠王</td></tr>          <tr><td>013</td><td>13</td><td>13</td><td>柏佳骏遭球迷恶搞 国字号球队凑齐五大洋帅</td></tr>          <tr><td>014</td><td>14</td><td>14</td><td>孙杨抵达青岛被众多粉丝簇拥 手捧鲜花备受欢迎</td></tr>          <tr><td>015</td><td>15</td><td>15</td><td>小威再要特权:怀孕生子重回赛场是对女选手的惩罚</td></tr>          <tr><td>016</td><td>16</td><td>16</td><td>曝傅明3次判罚定性为重大错漏判 遭足协内部禁哨处罚</td></tr>          <tr><td>017</td><td>17</td><td>17</td><td>足协已收超16亿引援调节费 中国青训能否从中得益?</td></tr>          <tr><td>018</td><td>18</td><td>18</td><td>维尼修斯:永远不会效力巴萨 25岁时要拿金球奖</td></tr>          <tr><td>019</td><td>19</td><td>19</td><td>菲律宾或将拥有两名归化 主帅自认是弱队却仍有野心</td></tr>          <tr><td>020</td><td>20</td><td>20</td><td>直击-库里征服森林狼球迷 汤神不确定是否战世界杯</td></tr>          <tr><td>021</td><td>21</td><td>21</td><td>两大超巨高挂免战牌 詹皇字母哥缺席湖人雄鹿对决</td></tr>          <tr><td>022</td><td>22</td><td>22</td><td>排名观察:掘金锁定季后赛 马刺超越雷霆进前五</td></tr>          <tr><td>023</td><td>23</td><td>23</td><td>詹皇哈登祝贺诺天王 字母哥是现代版奥胖?</td></tr>          <tr><td>024</td><td>24</td><td>24</td><td>吉诺比利祝贺马刺九连胜 阿德:对勇士须全力以赴</td></tr>          <tr><td>025</td><td>25</td><td>25</td><td>布罗格登成第八位跻身180俱乐部成员 雄鹿争冠需要他</td></tr>          <tr><td>026</td><td>26</td><td>26</td><td>综述:诺天王得分超张大帅 马刺击败勇士取九连胜</td></tr>          <tr><td>027</td><td>27</td><td>27</td><td>雄鹿如何进化成冠军竞争者 四项关键数据提升是主因</td></tr>          <tr><td>028</td><td>28</td><td>28</td><td>杜兰特称自己脚踝很好 克雷:我们只是没投进球</td></tr>          <tr><td>029</td><td>29</td><td>29</td><td>雄鹿裁掉伍德签约弗雷泽 填补布罗格登缺阵后场空缺</td></tr>          <tr><td>030</td><td>30</td><td>30</td><td>网友调侃詹皇被封盖 34岁的他真的老了?</td></tr>          <tr><td>031</td><td>31</td><td>31</td><td>尼克斯名宿批评詹皇比赛一举动:他并不关心湖人</td></tr>                  <tr><td>032</td><td>32</td><td>32</td><td>路威谈生涯首个压哨绝杀:队友取笑我不知如何庆祝</td></tr>          <tr><td>033</td><td>33</td><td>33</td><td>李春江和外援对喷真因 生病胃疼主动要求下场</td></tr>          <tr><td>034</td><td>34</td><td>34</td><td>WCBA总决赛八一广东迎生死战 李月汝欲率队夺冠</td></tr>          <tr><td>035</td><td>35</td><td>35</td><td>名宿:英格兰8年内能夺世界杯或欧洲杯 凯恩是完美领袖</td></tr>          <tr><td>036</td><td>36</td><td>36</td><td>法国篮协主席赞沈阳热情 戈贝尔领强阵战热身赛</td></tr>          <tr><td>037</td><td>37</td><td>37</td><td>吉格斯回击伊布批评92班:他好像比我们更了解曼联</td></tr>                  <tr><td>038</td><td>38</td><td>38</td><td>曝迪巴拉和伊卡尔迪互换东家要黄 尤文球星拒绝加盟国米</td></tr>                  <tr><td>039</td><td>39</td><td>39</td><td>西媒:越老越妖!梅西76.7分钟1球 效率直逼巅峰期</td></tr>                  <tr><td>040</td><td>40</td><td>40</td><td>什么水平?梅西37战造60球甩第二21球 几等于两个C罗</td></tr>              </table>      <table width="60%" align="right">          <tr><td><div id="uuty" name="uuty"></div></td></tr>      </table>      <script type="text/javascript">      	/**   1、 分页函数   2、 pno--页数   3、 psize--每页显示记录数   4、分页部分是从真实数据行开始,因而存在加减某个常数,以确定真正的记录数   5、 纯js分页实质是数据行全部加载,通过是否显示属性完成分页功能   **/  function goPage(pno,psize){      var itable = document.getElementById("idData");      var num = itable.rows.length;//表格所有行数(所有记录数)      console.log(num);      var totalPage = 0;//总页数      var pageSize = psize;//每页显示行数      //总共分几页       if(num/pageSize > parseInt(num/pageSize)){                 totalPage=parseInt(num/pageSize)+1;            }else{                totalPage=parseInt(num/pageSize);            }         var currentPage = pno;//当前页数      var startRow = (currentPage - 1) * pageSize+1;//开始显示的行  31          var endRow = currentPage * pageSize;//结束显示的行   40         endRow = (endRow > num)? num : endRow;    40         console.log(endRow);         //遍历显示数据实现分页      for(var i=1;i<(num+1);i++){              var irow = itable.rows[i-1];          if(i>=startRow && i<=endRow){              irow.style.display = "block";              }else{              irow.style.display = "none";          }      }      var pageEnd = document.getElementById("pageEnd");      var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";      if(currentPage>1){          tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";          tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"      }else{          tempStr += "首页";          tempStr += "<上一页";          }        if(currentPage<totalPage){          tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";          tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";      }else{          tempStr += "下一页>";          tempStr += "尾页";          }        document.getElementById("uuty").innerHTML = tempStr;        }      </script>  </body>   </html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册