纯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/post/7410.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知