31
2019
03

纯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

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

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。