原生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 ...

随机推荐

location.hash的不一样用法
除了可以当做锚点,定位到同name位置,location.hash还有两个用法. 平时开发都会用得到. 一:使js事件在浏览器中产生历史记录. 举个栗子: 我们在JS里面改变了页面的数据.样式等,比如 ...
redhat linux卸载自带的Java1.4.2安装JDK6
一.卸载jdk1.4 由于Redhat Enterprise Linux 5.6 中自带安装了jdk1.4.2的,所以在安装jdk1.6前我把jdk1.4.2的卸了,步骤如下: 1.打开终端输入 yu ...
spring中关于<context:component-scan>的使用说明
通常情况下我们在创建spring项目的时候在xml配置文件中都会配置这个标签,配置完这个标签后,spring就会去自动扫描base-package对应的路径或者该路径的子包下面的java文件,如果扫描 ...
手写Function.bind函数
if(!Function.prototype.bind){ Function.prototype.bind = function(oThis){ if(typeof this !=="fun ...
c/c++ explicit用法
试想一个类,它的构造函数只有一个参数, class test { test( int a ) {} 4 } 这时我想用一个int b = 10初始化它,这当然没问题,但如果你用一个字符例如'c'初始化 ...
https://vjudge.net/problem/2198220/origin
https://vjudge.net/problem/2198220/origin枚举等差数列第一个和第二个,然后二分确定数列后面是否存在,复杂度比较玄学,卡过了. #include<iostr ...
hdu4565
#include<iostream> #include<cstdio> #include<queue> #include<algorithm> #inc ...
ssh实现免密码登录和文件传输
一般的用户名密码认证不安全,很容易被暴力破解,还不方便:而大多数人都是选择使用 SSH 密钥认证,不仅安全还不用每次输密码 ssh密钥对 # 使用 ssh-keygen 生成非对称密钥,一路回车即可 ...
sql作业启停服务器
IF EXISTS(SELECT * FROM msdb.dbo.sysjobs WHERE name='启用pubs数据库') EXEC msdb.dbo.sp_delete_job @job_na ...
golang redis_example
main.go package main import ( "fmt" "github.com/garyburd/redigo/redis" ) func ma ...

原生js分页

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

随机推荐

热门专题