原生js分页

<html>

<head>

    <meta charset='utf-8'>

 <style type="text/css">

    #idData {color: red;border: solid;text-align: center;}

    a{text-decoration: none;}

    .on{background-color: red;}

 </style>

</head>

<body onLoad="goPage(1,2);">

     <tr><td>liujinzhong1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

    <table id="idData" width="70%" >

        <tr><td>liujinzhong1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong2</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong3</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong4</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong5</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong6</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong7</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong8</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong9</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong10</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong11</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong12</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong13</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong14</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong15</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong16</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong17</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong18</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong19</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong20</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong21</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong22</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong23</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong24</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong25</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong26</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong27</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong28</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong29</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong30</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong31</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong32</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong33</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong34</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong35</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong36</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong37</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong38</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong39</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong40</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

        <tr><td>liujinzhong41</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

         <tr><td>liujinzhong42</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

         <tr><td>liujinzhong42</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

         <tr><td>liujinzhong42</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

         <tr><td>liujinzhong42</td><td>25</td><td>男</td><td>山西吕梁</td></tr>

    </table>

    <table width="60%" align="right">

        <tr><td><div id="barcon" name="barcon"></div></td></tr>

    </table>

    <script>

    //goPage(pno,psize) pno当前页码 psize每页显示个数

        function goPage(pno,psize){

            var itable = document.getElementById("idData");

            var num = itable.rows.length;//表格所有行数(所有记录数)

            console.log(num);

            var totalPage = 0;//分多少页

            var pageSize = psize;//每页显示行数

            console.log(psize);

            //总共分几页

            if(num%pageSize!=0){

                    totalPage=parseInt(num/pageSize)+1;

               }else{

                   totalPage=parseInt(num/pageSize);

               }

                var currentPage = pno;//当前页数

                var startRow = (currentPage - 1) * pageSize+1;//每页开始的第一条数据

                var endRow = currentPage * pageSize;//每页的结束的一条数据

                endRow = (endRow > num)? num : endRow;

                 var irow=itable.getElementsByTagName('tr');

                    for(var j=0;j<num;j++){

                        irow[j].style.display = "none";

                         for(var i=startRow-1;i<endRow;i++){

                             irow[i].style.display = "block";

                      }

                    }

                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>0&&currentPage<4){

                    for(var pageIndex=1;pageIndex<6;pageIndex++){

                            //如果当前页数和pageIndex相等就加on

                            if(pageIndex==currentPage){

                                tempStr += "<a class=\"on\" onclick=\"goPage("+pageIndex+","+psize+")\"><span>"+ pageIndex +"</span></a>";

                            }else{

                                tempStr += "<a onclick=\"goPage("+pageIndex+","+psize+")\"><span>"+ pageIndex +"</span></a>";

                            }

                          }

                    }

                     if(totalPage-2>=currentPage&&currentPage>3){

                        tempStr += "...";

                        tempStr += "<a onclick=\"goPage("+(currentPage-2)+","+psize+")\"><span>"+ (currentPage-2) +"</span></a>";

                        tempStr += "<a onclick=\"goPage("+(currentPage-1)+","+psize+")\"><span>"+ (currentPage-1) +"</span></a>";

                        tempStr += "<a class=\"on\" onclick=\"goPage("+(currentPage)+","+psize+")\"><span>"+ currentPage +"</span></a>";

                        tempStr += "<a onclick=\"goPage("+(currentPage+1)+","+psize+")\"><span>"+ (currentPage+1) +"</span></a>";

                        tempStr += "<a onclick=\"goPage("+(currentPage+2)+","+psize+")\"><span>"+ (currentPage+2) +"</span></a>";

                        if(currentPage+2<totalPage){

                           tempStr += "...";

                        }

                     }

                     if(totalPage-1>=currentPage&&currentPage>totalPage-2){

                        tempStr += "<a onclick=\"goPage("+(currentPage-3)+","+psize+")\"><span>"+ (currentPage-3) +"</span></a>";

                        tempStr += "<a onclick=\"goPage("+(currentPage-2)+","+psize+")\"><span>"+ (currentPage-2) +"</span></a>";

                        tempStr += "<a onclick=\"goPage("+(currentPage-1)+","+psize+")\"><span>"+ (currentPage-1) +"</span></a>";

                        tempStr += "<a  class=\"on\" onclick=\"goPage("+(currentPage)+","+psize+")\"><span>"+ currentPage +"</span></a>";

                         tempStr += "<a onclick=\"goPage("+(currentPage+1)+","+psize+")\"><span>"+ (currentPage+1) +"</span></a>";

                     }

                     if(currentPage+1>totalPage){

                        tempStr += "<a onclick=\"goPage("+(currentPage-4)+","+psize+")\"><span>"+ (currentPage-4) +"</span></a>";

                        tempStr += "<a onclick=\"goPage("+(currentPage-3)+","+psize+")\"><span>"+ (currentPage-3) +"</span></a>";

                        tempStr += "<a onclick=\"goPage("+(currentPage-2)+","+psize+")\"><span>"+ (currentPage-2) +"</span></a>";

                        tempStr += "<a onclick=\"goPage("+(currentPage-1)+","+psize+")\"><span>"+ (currentPage-1) +"</span></a>";

                        tempStr += "<a  class=\"on\" onclick=\"goPage("+(currentPage)+","+psize+")\"><span>"+ currentPage +"</span></a>";

                     }

                       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("barcon").innerHTML = tempStr;

            }

    </script>

</body>

原生js分页的更多相关文章

原生js显示分页效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
原生 js 写分页
欢迎留言或者加本人QQ172360937咨询这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...
原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
原生 JS实现一个简单分页插件
最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...
浅谈js分页的几种方法
一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页更深入的去理解分页的意 ...
jPage.js分页
jPage.js插件使用文档这一款插件主要是为了bootstrap原生的分页功能效果不理想而诞生的一款插件. jPage.js代码更新地址为:https://github.com/leslieSie ...

随机推荐

numpy使用中的疑惑
numpy中有一些常用的用来产生随机数的函数,randn就是其中一个,randn函数位于numpy.random中,函数原型如下: numpy.random.randn(d0, d1, ..., dn ...
【python之路25】正则表达式
一.正则表达式简介就其本质而言,正则表达式(或RE)是一种小型的.高度专业化的(在python中),它内嵌在python中,并通过RE模块实现.正则表达式编译成一系列字节码,然后由用C编写的匹配引擎 ...
用reduce装逼之多个数组中得出公共子数组，统计数组元素出现次数
昨天做了一道美团的面试题,要求是给N个数组,找出N个数组的公共子数组. ,,,,]; ,,,,]; ,,,,]; ,,,,]; 以上四个数组,有公共子数组2, 3,7 function main(){ ...
LintCode_514 Paint Fence
题目 here is a fence with n posts, each post can be painted with one of the k colors.You have to paint ...
R语言中如何使用最小二乘法
R语言中如何使用最小二乘法这里只是介绍下R语言中如何使用最小二乘法解决一次函数的线性回归问题. 代码如下: > x<-c(6.19,2.51,7.29,7.01,5.7, ...
Spring线程安全的实现机制--ThreadLocal
转载: http://blog.csdn.net/lufeng20/article/details/24314381
INotitypropertyChanged
WPF数据绑定(要是后台类对象的属性值发生改变,通知在“client界面与之绑定的控件值”也发生改变须要实现INotitypropertyChanged接口) MainWindow.xaml < ...
poi操作word，简单写docx
参考博客: https://www.cnblogs.com/guilty/p/3977016.html 在HWPF中换行符是"\013",在XWPF中是run.addBreak() ...
Git.之.最小化配置
Git.之.最小化配置做一个全局的用户配置,便于以后提交代码等,记录当前操作的用户. ## 添加配置 # git config [--local | --global | --system] use ...
【CodeVS】【2004年NOIP全国联赛提高组】1057 津津的储蓄计划
1057 津津的储蓄计划 2004年NOIP全国联赛提高组时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题目描述 Description 津津的零花钱一直都是 ...

原生js分页

原生js分页的更多相关文章

随机推荐

热门专题