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

随机推荐

SVN和CVS的区别
对版本控制就有了一定的理解,同时也应该知道SVN与CVS是比较流行的两款SCM工具.那么到底这两款工具有什么区别呢? 1.版本编号方面例如,我们的版本库为A,其中有文件a,b,c. 在SVN中,新版 ...
取出Object对象里面的字段，
Type s = result.GetType(); bool f = (bool)s.GetField("Succeed").GetValue(result);//Succeed ...
Tire树入门专题
POJ 3630Phone List 题目连接:http://poj.org/problem?id=3630 题意:问是否有号码是其他号码的前缀. #include<iostream> # ...
MySQL之运算符与函数、自定义函数
一自定义函数简介 (1)自定义函数定义用户自定义函数(user-defined function,UDF)是一种对MySQL数据库扩展的途径,其用法与内置函数相同. (2)自定义函数的两个必要条件 ...
刨一刨内核container_of()的设计精髓
新年第一帖,总得拿出点干货才行,虽然这篇水分还是有点大,大家可以晒干了温水冲服.这段时间一直在整理内核学习的基础知识点,期间又碰到了container_of()这个宏,当然还包括一个叫做offseto ...
编译安装或者mysql启动时遇到的错误小记
编译安装遇到的错误:进入mysql目录 [root@localhost software]# cd mysql-5.6.19 [root@localhost mysql-5.5.11]# cmake ...
Getting Started With Hazelcast 读书笔记(第一章)
第一章:数据集群的演化与早期的服务器架构显然,应用是可扩展的,但是由于是集中式服务器,随着数据库性能达到极限,再想扩展就变得极端困难,于是出现了缓存. 缓存显然再次提升了可扩展性,减轻了数据 ...
win10下搭建QTP测试环境
安装环境win 10 64位企业版个人学习用1..net 3.5无法安装更新问题解决:打开windows update 服务2.win10 安装中提示为了对电脑进行保护,已经阻止此应用,请与管理员联 ...
proc文件系统
在shell终端里不带任何参数,直接运行mount命令可以显示正在挂载的文件系统.其中有这么一行 none on /proc type proc (rw) 这就是/proc文件系统.第一个域显示non ...
创建nim+安装vioc分区
一.搭建nim服务器 1.安装须知安装nim软件包,client随系统默认安装,这里需要安装的是bos.sysmgt.nim.master和bos.sysmgt.nim.spot,即bos.sysm ...

html中使用js+table 实现分页

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

随机推荐

热门专题