js实现分页

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

    </table>

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

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

    </table>

</body>

</html>
================================================================================================================

/**

 * 分页函数

 * pno--页数

 * psize--每页显示记录数

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

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

 **/

function goPage(pno,psize){

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

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

    console.log(num);

    var totalPage = 0;//总页数

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

    //总共分几页

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

            totalPage=parseInt(num/pageSize)+1;

       }else{

           totalPage=parseInt(num/pageSize);

       }

    var currentPage = pno;//当前页数

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

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

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

       console.log(endRow);

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

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

        var irow = itable.rows[i-1];

        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>1){

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

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

    }else{

        tempStr += "首页";

        tempStr += "<上一页";

    }

    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;

}

js实现分页的更多相关文章

原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
纯js实现分页
原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...
单篇文章JS模拟分页
废话部分前两天做了一个前台分页插件,支持ajax读取数据绑定前台和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...
js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...
原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
JS表格分页(封装版)
HTML代码: <html> <head> <meta charset='utf-8'> <script type="text/javascript ...
JS重构分页
JS重构分页很早以前写过一个Jquery分页组件,但是当时写的组件有个缺点,当时的JS插件是这样设计的:比如:点击 --> 查询按钮 ---> 发ajax请求返回总页数和所有数据, ...
C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介利用Bootstrap Paginator插件和knockout.js完成分页功能图片在线裁剪和图片上传总结循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi
C#设计模式总结一. 设计原则使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

随机推荐

现代3D图形编程学习--opengl使用不同的缓存对象（译者添加）
现代3D图形编程学习系列翻译地址 http://www.cnblogs.com/grass-and-moon/category/920962.html opengl使用不同的缓存对象在设置颜色一章中 ...
jenkins+webhook+docker做持续集成
简介:我们现在都流行把项目封装成docker的镜像,不过实际用的时候就会发现很麻烦,我们每次更改代码了以后都要打包成docker容器 ,事实证明项目比较多的时候真的会让人崩溃,我这边用spring c ...
TomCat杀进程
有时候当你的tomcat启动时会发现因为报以下的错误: "Several ports ( 8080, 8009) required by Tomcat v6.0 Server at loc ...
java复习(5)---接口、继承、多态
Java作为完全面向对象语言,接口.继承和多态是三个非常重要的概念. 1.继承. (1)关键字: extends (2)子类用super()调用父类构造函数,用super().方法调用父类的成员方法 ...
java接收数据接口
1.数据接收接口: 这个可以考虑最简单的Servlet方法,而且效率较高: import java.io.PrintWriter;import java.text.SimpleDateFormat;i ...
sdkman安装
软件开发工具管理包(Software Development Kit Manager,简称SDKMAN) 用来管理多个版本的开发环境的工具.提供命令行来安装.切换.删除.列出候选版本. 官网地址:ht ...
腾讯QQAndroid API调用实例（QQ分享无需登录）
腾讯QQAndroid API调用实例(QQ分享无需登录) 主要分为两个步骤: 配置Androidmanifest.xml 修改activity里边代码具体修改如下: 1.Activity代 ...
linux网络设置和虚拟机克隆转移之后Error:No suitable device found:no device found for connection 'System eth0'问题解决
以root用户登录 #vi /etc/sysconfig/network-scripts/ifcfg-eth0 #编辑配置文件,添加修改以下内容 BOOTPROTO=static #启用 ...
ACE框架同步原语设计
ACE框架常用的同步机制设计成统一的原语接口.同步原语使用系统平台(操作系统,多线程库)提供的同步原语,并为系统平台不提供的同步原语提供模拟实现.ACE框架使用了外观模式和适配器分两层,将同步原语统一 ...
573. Squirrel Simulation
Problem statement: There's a tree, a squirrel, and several nuts. Positions are represented by the ce ...

js实现分页

js实现分页的更多相关文章

随机推荐

热门专题