js -- 分页功能

html 代码

<html>

<head>

    <meta charset='utf-8'>

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

 <style type="text/css">

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

    a{text-decoration: none;}

 </style>

</head>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    </table>

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

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

    </table>

</body>

</html>

js 分页

/**

 * 分页函数

 * pno--页数

 * psize--每页显示记录数

 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数

 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能

 **/

function goPage(pno,psize){

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

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

    console.log(num);

    var totalPage = ;//总页数

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

    //总共分几页

    if(num/pageSize > parseInt(num/pageSize)){

            totalPage=parseInt(num/pageSize)+;

       }else{

           totalPage=parseInt(num/pageSize);

       }

    var currentPage = pno;//当前页数

    var startRow = (currentPage - ) * pageSize+;//开始显示的行  31

       var endRow = currentPage * pageSize;//结束显示的行   40

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

       console.log(endRow);

       //遍历显示数据实现分页

    for(var i=;i<(num+);i++){

        var irow = itable.rows[i-];

        if(i>=startRow && i<=endRow){

            irow.style.display = "block";

        }else{

            irow.style.display = "none";

        }

    }

    var pageEnd = document.getElementById("pageEnd");

    var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";

    if(currentPage>){

        tempStr += "<a href=\"#\" onClick=\"goPage("+()+","+psize+")\">首页</a>";

        tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-)+","+psize+")\"><上一页</a>"

    }else{

        tempStr += "首页";

        tempStr += "<上一页";

    }

    if(currentPage<totalPage){

        tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+)+","+psize+")\">下一页></a>";

        tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";

    }else{

        tempStr += "下一页>";

        tempStr += "尾页";

    }

    document.getElementById("barcon").innerHTML = tempStr;

}

js -- 分页功能的更多相关文章

自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
jsp、js分页功能的简单总结
一.概述首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...
jQuery+AJAX实现纯js分页功能
使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用 ...
js分页功能实现
实现一个js的分页并在弹出框中显示 1.分页插件使用:bootstarp-paginator.js,需要先引入bootstarp.js和jquery.js等: !function($){"u ...
前端js分页功能的实现，非常实用，新手必看
分享一个前端拿到数据后,自己生成分页的案例,案例如图显示,点击搜索后查询数据,显示数据列表,前端根据数据显示正确的分页附上代码:代码附上,简单粗暴,自己用过的,兼容性好,没有封装,可以很好的分页原理 ...
简单封装分页功能pageView.js
分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...
[Ext JS 4] Grid 实战之分页功能
前言分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据.也就是要多少取多少.这种方式比较适合Grid 的数据量很大,需 ...
C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介利用Bootstrap Paginator插件和knockout.js完成分页功能图片在线裁剪和图片上传总结循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi
C#设计模式总结一. 设计原则使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
原生js实现分页功能
原生就是实现分页功能代码如下: var pagination = function(option,fun){ this.parentId = option.id; //容器 this.pageSiz ...

随机推荐

Linux 玩法
php 跑不了,只来404 同一台linux服务器上建两个网站(www.A.com, www.B.com),现在A和B都跑起来了,但只有 A 能跑 php, B只能跑静态 html 文件,不知道哪里设 ...
Java基础学习补充 -- 异常处理和log4j日志
Java中的异常处理异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. Java中所有异常的基类Throwable:Throwable又分为Error类和Excepti ...
P1452 Beauty Contes
题目背景此处省略1W字^ ^ 题目描述贝茜在牛的选美比赛中赢得了冠军”牛世界小姐”.因此,贝西会参观N(2 < = N < = 50000)个农场来传播善意.世界将被表示成一个二维平面 ...
C#共享WIFI能通过代码控制给连接的移动端分配IP么
用C#创建了一个虚拟WIFI,但是能不能通过代码来给连接上的移动端分配各自的IP.之前都是自动分配的IP.望大神们赐教 C#共享WIFI能通过代码控制给连接的移动端分配IP么 >> csh ...
sql 知识点
1 聚集索引和非聚集索引的区别聚集索引是指表中存储的数据按照索引的顺序来存储,数据检索效率高,但是对数据更新影响较大:非聚集索引是数据存储在一个地方,索引存储在另一个地方:索引带有指针,指向数据的 ...
Futures and promises
In computer science, future, promise, delay, and deferred refer to constructs used for synchronizing ...
Python多版本情况下四种快速进入交互式命令行的操作技巧
因为工作需求或者学习需要等原因,部分小伙伴的电脑中同时安装了Python2和Python3,相信在Python多版本的切换中常常会遇到Python傻傻分不清楚的情况,今天小编整理了四个操作技巧,以帮助 ...
[POI2008]KUP-Plot purchase（单调队列）
题意给定k,n,和n*n的矩阵,求一个子矩形满足权值和在[k,2k]之间 , 题解这里用到了极大化矩阵的思想.推荐论文<浅谈用极大化思想解决最大子矩阵问题>Orz 如果有一个元素在[k ...
网络编程select函数
select函数的作用: 在编程的过程中,经常会遇到许多阻塞的函数,好像read和网络编程时使用的recv, recvfrom函数都是阻塞的函数,当函数不能成功执行的时候,程序就会一直阻塞在这里,无法 ...
java流1----InputStream、OutputStream、Reader、Writer
字节流和字符流顾名思义,字节流就是操作的是字节,字符流操作的就是字符.其中字节流又可以分为字节输入流(InputStream)和字节输出流(OutputStream).同样的字符流也可以分为字符输入 ...

js -- 分页功能

js -- 分页功能的更多相关文章

随机推荐

热门专题