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

  1. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  2. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

  3. jQuery+AJAX实现纯js分页功能

    使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用 ...

  4. js分页功能实现

    实现一个js的分页并在弹出框中显示 1.分页插件使用:bootstarp-paginator.js,需要先引入bootstarp.js和jquery.js等: !function($){"u ...

  5. 前端js分页功能的实现,非常实用,新手必看

    分享一个前端拿到数据后,自己生成分页的案例,案例如图显示,点击搜索后查询数据,显示数据列表,前端根据数据显示正确的分页 附上代码:代码附上,简单粗暴,自己用过的,兼容性好,没有封装,可以很好的分页原理 ...

  6. 简单封装分页功能pageView.js

    分页是一个很简单,通用的功能.作为一个有经验的前端开发人员,有义务把代码中类似这样公共的基础性的东西抽象出来,一来是改善代码的整体质量,更重要的是为了将来做类似的功能或者类似的项目,能减少不必要的重复 ...

  7. [Ext JS 4] Grid 实战之分页功能

    前言 分页功能的实现有两种途径: 一种是服务端分页方式, 也就是web客户端传递页码参数给服务端,服务端根据页面参数返回指定条数的数据.也就是要多少取多少.这种方式比较适合Grid  的数据量很大,需 ...

  8. C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi

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

  9. 原生js实现分页功能

    原生就是实现分页功能 代码如下: var pagination = function(option,fun){ this.parentId = option.id; //容器 this.pageSiz ...

随机推荐

  1. Hive框架基础(二)

    * Hive框架基础(二) 我们继续讨论hive框架 * Hive的外部表与内部表 内部表:hive默认创建的是内部表 例如: create table table001 (name string , ...

  2. [ Git ] [ GitHub ] 如何刪除自己github上面的Repository-轉載

    http://www.winwu.cc/2013/03/githubrepository.html

  3. 洛谷3933 Chtholly Nota Seniorious 二分答案+贪心

    题目链接 题意 给你一个N*M的矩阵 (N,M <=2000)  把他分成两部分 使两部分的极差较大的一个最小  求这个最小值.然后分矩阵的要求是:每个部分内部的方块之间,可以通过上下左右相互到 ...

  4. PKI 信息安全三大特性

    [机密性]发送方                                            接收方明文 M                                          ...

  5. CMSIS-RTOS 简介

    CMSIS-RTOS API是基于Arm®Cortex®-M处理器的设备的通用RTOS接口.CMSIS-RTOS为需要RTOS功能的软件组件提供标准化API,从而为用户和软件行业带来了巨大的好处. C ...

  6. 题解 P2195 【HXY造公园】

    天哪这道题竟然只有一篇题解! emm,首先读题看完两个操作就已经有很明确的思路了,显然是并查集+树的直径 一波解决. 并查集不多说了,如果不了解的可以看这里. 树的直径的思路很朴实,就是两边DFS(B ...

  7. Spring学习详解(1)——Spring入门详解

    一:spring的基本用法: 1,关于spring容器: spring容器是Spring的核心,该 容器负责管理spring中的java组件, ApplicationContext ctx  = ne ...

  8. easyui combobox keyhandler使用

    easyui combobox keyhandler使用 在combo组件中有属性:   keyHandler : { up : function() { console.log('upupup'); ...

  9. Windows改动cmd字符集

    在中文Windows系统中,假设一个文本文件是UTF-8编码的,那么在CMD.exe命令行窗体(所谓的DOS窗体)中不能正确显示文件里的内容.在默认情况下,命令行窗体中使用的代码页是中文或者美国的,即 ...

  10. shell 脚本去掉月份和天数的前导零

    #!/bin/sh # # shell 脚本去掉月份和天数的前导零 # 前面填 1 变成百位数,然后减 100 # 去掉前导零的通用方法 $((10#$(date +%m))) # 把字符串分割成数组 ...