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#设计模式总结一. 设计原则使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

随机推荐

struts2 之 struts2类型转换
1. 在struts2中,相比servlet来时,获取数据时,程序员没有进行手动的类型转换,类型转换工作都有struts2来完成处理,但愿对于自定义类型数据,struts2不会帮助我们完成类型转换工作 ...
js的break语句，continue语句，return语句
js的break语句,continue语句,return语句. 用的时候很容易混淆,有过一次泪奔的经历. break语句 break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch ...
js原型二
function Box(name,age){ this.name = name; this.age = age; this.family = ['哥哥',‘姐姐’,‘妹妹’]: } Box.prot ...
容器 What, Why, How - 每天5分钟玩转容器技术（6）
学习任何东西都可以按照3W的框架进行,容器技术也是一样,先回答 What.Why 和 How 这三个问题. What - 什么是容器? 容器是一种轻量级.可移植.自包含的软件打包技术,使应用程序可以在 ...
Filter和Listener的应用——分IP统计网站访问次数
一:分析统计工作需要在所有资源执行前进行,所以需要放在filter中这个拦截器仅仅进行统计工作,不进行拦截,所以请求必须继续传递下去用Map<String,integer>来保存数据 ...
stl_组件
2.1.STL中: 2.1.1.包含常用的数据结构. 2.1.2.包含常用的基本算法.结构和算法其实就是一些接口. 2.1.3.提供了一套可扩展的框架. 2.2.六大组件: 2.2.1.容器组件(基本 ...
linux基础作业篇
1.自动部署反向代理 web nfs #!/usr/bin/python #-*- coding:utf-8 -*- #开发脚本自动部署及监控 #1.编写脚本自动部署反向代理.web.nfs: #!/ ...
js小数处理
js中的小数处理先说说Math的几个方法: 1.Math.floor(x) 返回不大于当前数的最大整数. 我的记法:floor 直译地板也就是不大于的的意思 (x-0.5 四舍五入取整 ...
Vue2.x中的父组件数据传递至子组件
父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-gir ...
luogu P1015 回文数
题目描述: 若一个数(首位不为零)从左向右读与从右向左读都一样,我们就将其称之为回文数. 例如:给定一个10进制数56,将56加65(即把56从右向左读),得到121是一个回文数. 又如:对于10进制 ...

js实现分页

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

随机推荐

热门专题