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

随机推荐

NSDate和NSString相互转换
一.NSDate转NSString //获取系统当前时间 NSDate *currentDate = [NSDate date]; //用于格式化NSDate对象 NSDateFormatter *d ...
redis 数据类型
上一篇文章主要写了redis在linux下的安装,这里讲一下redis基本的数据类型,linux的数据类型比较丰富,主要有五种数据类型 .String 字符串类型常用命令: 除了get.set.in ...
Python 基本语法学习之路（三）
定义变量在Python中,定义一个变量是很简单的.而且,在Python中,定义是不需要用分号结尾的.例如: a = 10 b = 3 print(a*b) 判断语句 Pyhon的if判断语句是由if ...
基于webmagic的爬虫小应用--爬取知乎用户信息
听到“爬虫”,是不是第一时间想到Python/php ? 多少想玩爬虫的Java学习者就因为语言不通而止步.Java是真的不能做爬虫吗? 当然不是. 只不过python的3行代码能解决的问题,而Jav ...
aa12
option = { backgroundColor: '#1b1b1b', color: ['gold','aqua','lime'], title : { text: '模拟迁徙', subtex ...
WebView加载HTML图片大小自适应与文章自动换行
http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容 ...
初识C语言
C语言是开发iOS软件的基础. 一.C语言简介 1. 简史 1) C语言于1972年发明,首次使用是用于重写UINX操作系统(UNIX以前主要是用汇编语言写的,它奠定了操作 ...
jsp:软件包 javax.servlet 不存在
jdk里面有javax.servlet和javax.servlet.http这两个包吗? JavaServlet程序运行还需要安装JDK以外的包吗...? why?我运行JavaServlet程序的时 ...
Gray Code
Gray Code The gray code is a binary numeral system where two successive values differ in only one bi ...
IIS出现问题时修改配置文件的几项说明
近期系统在线运行经常出现object moved错误通过查询资料,做了几项web.config文件的调整 1,调整应用程序池使用集成模式 <system.webServer> ...

html中使用js+table 实现分页

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

随机推荐

热门专题