html中使用js+table 实现分页

本文在html中利用js＋table实现分页。主要思想是先对table中的所有数据隐藏，然后通过当前页面(currPageNum)来计算当前页要显示的行，并显示出来，首页、下一页、上一页、尾页都依此来实现。

可以直接运行。

一、html页面

1. 在页面中直接向table写好数据，定义table的id；

2. 在页面中加入首页、上一页、下一页、尾页，当前页、总页数等标签；

3. 在页面中的javascript部分声明会用到的变量，并写好加载函数，window.onload=function(){...}。

二、js部分

1. 在js文件中依次实现首页、上一页、下一页、尾页等功能；

2. 控制首页等功能的显示与不显示。

以下是代码部分，欢迎批评与指正。

js文件为pagination.js

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title><style type="text/css">

    body{

    }

    table .table-striped{

    }

    table th{

        text-align: left;

        height: 30px;

        background: #deeeee;

        padding: 5px;

        margin: 0;

        border: 0px;

    }

    table td{

        text-align: left;

        height:30px;

        margin: 0;

        padding: 5px;

        border:0px

    }

    table tr:hover{

        background: #eeeeee;

    }

    .span6{

        /*width:500px;*/

        float:inherit;

        margin:10px;

    }

    #pagiDiv span{

        background:#1e90ff;

        border-radius: .2em;

        padding:5px;

    }

</style>

    <script type="text/javascript" src="pagination.js"></script>

    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

    <script type="text/javascript">

        //全局变量

        var numCount;       //数据总数量

        var columnsCounts;  //数据列数量

        var pageCount;      //每页显示的数量

        var pageNum;        //总页数

        var currPageNum ;   //当前页数

        //页面标签变量

        var blockTable;

        var preSpan;

        var firstSpan;

        var nextSpan;

        var lastSpan;

        var pageNumSpan;

        var currPageSpan;

        window.onload=function(){

            //页面标签变量

            blockTable = document.getElementById("blocks");

            preSpan = document.getElementById("spanPre");

            firstSpan = document.getElementById("spanFirst");

            nextSpan = document.getElementById("spanNext");

            lastSpan = document.getElementById("spanLast");

            pageNumSpan = document.getElementById("spanTotalPage");

            currPageSpan = document.getElementById("spanPageNum");

            numCount = document.getElementById("blocks").rows.length - 1;       //取table的行数作为数据总数量（减去标题行1）

            alert(numCount)

            columnsCounts = blockTable.rows[0].cells.length;

            pageCount = 5;

            pageNum = parseInt(numCount/pageCount);

            if(0 != numCount%pageCount){

                pageNum += 1;

            }

            firstPage();

        };

    </script>

</head>

<body align="center">

<div class="container" align="center" >

    <h2 align="center">Recent blocks Found By AntPool</h2>

    <table id="blocks" class="table table-striped" style="margin-top:25px">

        <tr>

            <th>Height</th>

            <th>Time</th>

            <th class="hidden-phone">Hash</th>

            <th class="hidden-phone">Size (kB)</th>

        </tr>

        <tr>

            <td><a href="/block-height/424785">424785</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-12 02:05:22</td>

            <td class="hidden-phone"><a href="/block-index/1134734/000000000000000002b480be703da2ad59a55c53052aecf8b6f6f35e640cc60d">000000000000000002b480be703da2ad59a55c53052aecf8b6f6f35e640cc60d</a></td>

            <td class="hidden-phone">637.52</td>

        </tr>

        <tr>

            <td><a href="/block-height/424784">424784</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-12 01:59:57</td>

            <td class="hidden-phone"><a href="/block-index/1134733/000000000000000002fb51f28a8747636cc7cc2e01a589eb18a13f9a201962e0">000000000000000002fb51f28a8747636cc7cc2e01a589eb18a13f9a201962e0</a></td>

            <td class="hidden-phone">275.59</td>

        </tr>

        <tr>

            <td><a href="/block-height/424782">424782</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-12 01:39:55</td>

            <td class="hidden-phone"><a href="/block-index/1134731/0000000000000000056ead77c44639db8a1db3841092c84415e133a28d2d1826">0000000000000000056ead77c44639db8a1db3841092c84415e133a28d2d1826</a></td>

            <td class="hidden-phone">998.19</td>

        </tr>

        <tr>

            <td><a href="/block-height/424781">424781</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-12 01:38:01</td>

            <td class="hidden-phone"><a href="/block-index/1134730/0000000000000000042dd6ff6e1517d41476edb85214de2ac38c490cfc28d748">0000000000000000042dd6ff6e1517d41476edb85214de2ac38c490cfc28d748</a></td>

            <td class="hidden-phone">270.23</td>

        </tr>

        <tr>

            <td><a href="/block-height/424778">424778</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-12 01:31:07</td>

            <td class="hidden-phone"><a href="/block-index/1134727/00000000000000000383b1b0eda2a2f13b38f762aeecd482af2ca3c82c27792e">00000000000000000383b1b0eda2a2f13b38f762aeecd482af2ca3c82c27792e</a></td>

            <td class="hidden-phone">997.83</td>

        </tr>

        <tr>

            <td><a href="/block-height/424760">424760</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-11 22:52:52</td>

            <td class="hidden-phone"><a href="/block-index/1134709/00000000000000000077be0493ffedc93a439bb30f553a287a39bdd71b3c21e5">00000000000000000077be0493ffedc93a439bb30f553a287a39bdd71b3c21e5</a></td>

            <td class="hidden-phone">638.13</td>

        </tr>

        <tr>

            <td><a href="/block-height/424754">424754</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-11 22:23:47</td>

            <td class="hidden-phone"><a href="/block-index/1134703/000000000000000003e1b4d2f2ef07469f9b1bc741c21acae7c811eef9ad9555">000000000000000003e1b4d2f2ef07469f9b1bc741c21acae7c811eef9ad9555</a></td>

            <td class="hidden-phone">998.05</td>

        </tr>

        <tr>

            <td><a href="/block-height/424749">424749</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-11 21:12:14</td>

            <td class="hidden-phone"><a href="/block-index/1134698/000000000000000000810a12db329d6c60b6d67e7c4a1b2d65212f8f567d7318">000000000000000000810a12db329d6c60b6d67e7c4a1b2d65212f8f567d7318</a></td>

            <td class="hidden-phone">994.33</td>

        </tr>

        <tr>

            <td><a href="/block-height/424732">424732</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-11 18:46:18</td>

            <td class="hidden-phone"><a href="/block-index/1134681/0000000000000000005359eef3594cc9f92da3ac9cf49d27986457788924d634">0000000000000000005359eef3594cc9f92da3ac9cf49d27986457788924d634</a></td>

            <td class="hidden-phone">998.16</td>

        </tr>

        <tr>

            <td><a href="/block-height/424730">424730</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-11 18:36:30</td>

            <td class="hidden-phone"><a href="/block-index/1134679/0000000000000000002e5bacfa2162eab79108c5c8f0c23e344c7b7b7d38b788">0000000000000000002e5bacfa2162eab79108c5c8f0c23e344c7b7b7d38b788</a></td>

            <td class="hidden-phone">998.16</td>

        </tr>

        <tr>

            <td><a href="/block-height/424716">424716</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-11 16:21:42</td>

            <td class="hidden-phone"><a href="/block-index/1134665/000000000000000004508a2286a0f78b6801b56062d852ea7b17e11b052ef161">000000000000000004508a2286a0f78b6801b56062d852ea7b17e11b052ef161</a></td>

            <td class="hidden-phone">998.03</td>

        </tr>

        <tr>

            <td><a href="/block-height/424710">424710</a> <font color="green">(Main Chain)</font></td>

            <td>2016-08-11 15:10:04</td>

            <td class="hidden-phone"><a href="/block-index/1134659/000000000000000004670d4aa86aeed176cd28cccb3ff1f2dd42a97067d3e24e">000000000000000004670d4aa86aeed176cd28cccb3ff1f2dd42a97067d3e24e</a></td>

            <td class="hidden-phone">0.21</td>

        </tr>

    </table>

    <div id="pagiDiv" align="right" style="width:1200px">

        <span id="spanFirst">First</span>&nbsp;&nbsp;

        <span id="spanPre">Pre</span>&nbsp;&nbsp;

        <span id="spanNext">Next</span>&nbsp;&nbsp;

        <span id="spanLast">Last</span>&nbsp;&nbsp;

        The&nbsp;<span id="spanPageNum"></span>&nbsp;Page/Total&nbsp;<span id="spanTotalPage"></span>&nbsp;Page

    </div>

</div>

</body>

</html>

/**

 * Created by mendez on 16/8/12.

 */

function firstPage(){

    hide();

    currPageNum = 1;

    showCurrPage(currPageNum);

    showTotalPage();

    for(i = 1; i < pageCount + 1; i++){

        blockTable.rows[i].style.display = "";

    }

    firstText();

    preText();

    nextLink();

    lastLink();

}

function prePage(){

    hide();

    currPageNum--;

    showCurrPage(currPageNum);

    showTotalPage();

    var firstR = firstRow(currPageNum);

    var lastR = lastRow(firstR);

    for(i = firstR; i < lastR; i++){

        blockTable.rows[i].style.display = "";

    }

    if(1 == currPageNum){

        firstText();

        preText();

        nextLink();

        lastLink();

    }else if(pageNum == currPageNum){

        preLink();

        firstLink();

        nextText();

        lastText();

    }else{

        firstLink();

        preLink();

        nextLink();

        lastLink();

    }

}

function nextPage(){

    hide();

    currPageNum++;

    showCurrPage(currPageNum);

    showTotalPage();

    var firstR = firstRow(currPageNum);

    var lastR = lastRow(firstR);

    for(i = firstR; i < lastR; i ++){

        blockTable.rows[i].style.display = "";

    }

    if(1 == currPageNum){

        firstText();

        preText();

        nextLink();

        lastLink();

    }else if(pageNum == currPageNum){

        preLink();

        firstLink();

        nextText();

        lastText();

    }else{

        firstLink();

        preLink();

        nextLink();

        lastLink();

    }

}

function lastPage(){

    hide();

    currPageNum = pageNum;

    showCurrPage(currPageNum);

    showTotalPage();

    var firstR = firstRow(currPageNum);

    for(i = firstR; i < numCount + 1; i++){

        blockTable.rows[i].style.display = "";

    }

    firstLink();

    preLink();

    nextText();

    lastText();

}


// 计算将要显示的页面的首行和尾行

function firstRow(currPageNum){

    return pageCount*(currPageNum - 1) + 1;

}

function lastRow(firstRow){

    var lastRow = firstRow + pageCount;

    if(lastRow > numCount + 1){

        lastRow = numCount + 1;

    }

    return lastRow;

}

function showCurrPage(cpn){

    currPageSpan.innerHTML = cpn;

}

function showTotalPage(){

    pageNumSpan.innerHTML = pageNum;

}


//隐藏所有行

function hide(){

    for(var i = 1; i < numCount + 1; i ++){

        blockTable.rows[i].style.display = "none";

    }

}


//控制首页等功能的显示与不显示

function firstLink(){firstSpan.innerHTML = "<a href='javascript:firstPage();'>First</a>";}

function firstText(){firstSpan.innerHTML = "First";}

function preLink(){preSpan.innerHTML = "<a href='javascript:prePage();'>Pre</a>";}

function preText(){preSpan.innerHTML = "Pre";}

function nextLink(){nextSpan.innerHTML = "<a href='javascript:nextPage();'>Next</a>";}

function nextText(){nextSpan.innerHTML = "Next";}

function lastLink(){lastSpan.innerHTML = "<a href='javascript:lastPage();'>Last</a>";}

function lastText(){lastSpan.innerHTML = "Last";}

html中使用js+table 实现分页的更多相关文章

Django中使用JS通过DataTable实现表格前端分页，每页显示页数，搜索等功能
Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...
利用JS实现HTML TABLE的分页
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码一.JS代码 <script type="text/javascript" ...
web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo
背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...
MySQL+Service+Servlet+Jsp实现Table表格分页展示数据
下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...
js实现前端分页页码管理
用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...
bootstrap中popover.js(弹出框)使用总结+案例
bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...
html中使用js实现内容过长时部分
有时数据内容太长时我们并不希望其全部显示出来,因为这样可能会导致用于显示这些内容的标签被撑开影响美观. 这时就希望能够实现默认只显示部分内容,在鼠标放上去的时候再将全部的内容显示出来. 这里提供一个简 ...
RDIFramework.NET 中多表关联查询分页实例
RDIFramework.NET 中多表关联查询分页实例 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用户和开发者最佳的.Net框架部署方案.该框架以SOA范式作为 ...
bootstrap table 服务器端分页例子分享
这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载复制代码代码如下: function getTab(){var ...

随机推荐

[z]oracle job
我们在项目开发中,常常会有一些复杂的业务逻辑.使用oracle的存储过程,可以大大减少Java程序代码的编写工作量,而且存储过程执行在数据库上,这样可以利用oracle的良好性能支持,极大地提高程序执 ...
iOS.DistributionApp.1-mobile-provision-file[draft]
.mobileprovision file 0. .mobileprovision file的作用 .mobileprovision file作用以及扮演的角色 1. 如何删除旧的.mobilepro ...
ssh注解整合
ssh注解整合导入java包配置struts2环境 1. 创建struts.xml配置文件 <?xml version="1.0" encoding="UTF- ...
搭建高可用mongodb集群（四）—— 分片
按照上一节中<搭建高可用mongodb集群(三)—— 深入副本集>搭建后还有两个问题没有解决: 从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的 ...
获取Linux进程运行在哪个CPU内核上面的方法
首先,当某些时候,在一段程序或者借助第三方软件进行程序协助的时候,在性能的优化,以及程序bug的排除上面,可能会想知道该程序执行的进程被调度到了哪一个CPU内核进行工作,从而可以推断是否是受限于硬件还 ...
Loadrunner监控Linux的17个指标
这17个指标根据需要设置吧,指标设置的越多,对服务器真实值影响越大,所以要秉承按需而设的原则. 1.Average load:Average number of processes simulta ...
Http协议与TCP协议简单理解(转)
在C#编写代码,很多时候会遇到Http协议或者TCP协议,这里做一个简单的理解.TCP协议对应于传输层,而HTTP协议对应于应用层,从本质上来说,二者没有可比性.Http协议是建立在TCP协议基础之上 ...
SaaS模式给用户带来的优势
这两年SaaS服务在中国越来越受欢迎,企业正在从使用本地化软件向SaaS服务转变.由于企业用户人力成本的上升.移动终端设备的兴起以及共享经济对企业的影响,企业采用经营设备.软件的方式也在逐渐发生着变化 ...
asp.net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法首先在_Layout.cshtml文件中加载运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
收藏的 500多个开源的Git源码
由dkhamsing发起的Open-Source iOS Apps收集了各种开源的iOS App,并进行了详细的分类,比如游戏.社交.健康.键盘.定位.多媒体.新闻.办公.安全以及小工具类等.截至目前 ...

html中使用js+table 实现分页

html中使用js+table 实现分页的更多相关文章

随机推荐

热门专题