纯js实现分页

原理：所有数据已加载好，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>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>

js实现分页

/**

 * 分页函数

 * 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分页demo的更多相关文章

jquery.pagination.js分页demo
公用jquery.pagination.js /** * This jQuery plugin displays pagination links inside the selected elemen ...
pagebean pagetag java 后台代码实现分页 demo 前台标签分页后台java分页
java 后台代码实现分页 demo 实力自己写的标签分页 package com.cszoc.sockstore.util; import java.util.HashMap;import ja ...
Bootstrap的js分页插件属性介绍
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状 ...
js分页小结
今天解决了JS分页的问题1 页码给每页的内容套一个相同的类名通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...
Three.js基本 Demo
对于新手来说,几个简单的例子非常实用,偶然发现几个不错的Demo,分享给大家! Three.js基本 Demo 1.最基本的Hello World:http://stemkoski.github.io ...
自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
jsp、js分页功能的简单总结
一.概述首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...
一个重构的js分页类
// JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...
面向对象版js分页
基于前一个js分页,我将代码改成一个面向对象版的js分页,代码如下 http://peng666.github.io/blogs/pageobj <!DOCTYPE html> <h ...

随机推荐

ImageSwitch图像切换控件
ImageSwitch图像切换控件继承ViewAnimator所以可以做动画继承ViewGroup所以可以装别的控件,所以ImageSwitch里面装的就是image,不过要找个ImageView ...
WPF绑定数据源之RelativeSource
Command="{Binding ConfirmRegisterCommand}" CommandParameter="{Binding RelativeSource= ...
python直接赋值，浅拷贝和深拷贝
本文参考自<Python 直接赋值.浅拷贝和深度拷贝解析> 定义直接赋值:就是对象的引用(别名) 浅拷贝(copy):拷贝父对象,不拷贝对象内部的子对象深拷贝(deepcopy):co ...
51nod 1281 二分
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1281 隐藏话题 1281 山峰和旗子题目来源: Codility 基准 ...
c#将DataTable内容导出为CSV文件
写了个类: class DataTableAndCSV { public static DataTable csvToDataTable(string file) { string strConn = ...
Windows 10 Certified with Oracle E-Business Suite
Microsoft Windows 10 (32-bit and 64-bit) is certified as a desktop client operating system for end-u ...
[原创]Java动态填充word文档并上传到服务器
一. 需求背景在一些特殊应用场合,客户希望在服务器上生成文档的同时并填充数据,客户端的页面不显示打开文档,但是服务器上生成文档对服务器压力很大,目前服务器上生成文档第一种就是方式是jacob, 但是 ...
DB21019E An error occurred while accessing the directory "/root".
如果是在Linux上刚装完DB2即刻建立database,可能会遇到错误DB21019E An error occurred while accessing the directory "/ ...
基于鸿洋博客自定于View实现的android音量调节控件
1.在values建立attrs.xml,写出你需要的属性: <?xml version="1.0" encoding="utf-8"?> < ...
Spring_总结_04_高级配置(一)_Profile
一.前言本文承接上一节:Spring_总结_03_装配Bean(四)之导入与混合配置这一节,来总结一下profile. 我们在开发软件时,通常会进行跨环境部署.而在跨环境部署时,经常会遇到某些环境 ...

js分页demo

纯js实现分页

js分页demo的更多相关文章

随机推荐

热门专题