`
jiony
  • 浏览: 185199 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

纯javaSript分页

prototypeJavaScriptXHTMLHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript">
function Page(iAbsolute,sTableId,sTBodyId){
this.absolute = iAbsolute; //每页最大记录数
this.tableId = sTableId;
this.tBodyId = sTBodyId;
this.rowCount = 0;//记录数
this.pageCount = 0;//页数
this.pageIndex = 0;//页索引
this.__oTable__ = null;//表格引用
this.__oTBody__ = null;//要分页内容
this.__dataRows__ = 0;//记录行引用
this.__oldTBody__ = null;
this.__init__(); //初始化;
};
/**//*
初始化
*/
Page.prototype.__init__ = function(){
this.__oTable__ = document.getElementById(this.tableId);//获取table引用
this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];//获取tBody引用
this.__dataRows__ = this.__oTBody__.rows;
this.rowCount = this.__dataRows__.length;
try{
this.absolute = (this.absolute <= 0) || (this.absolute>this.rowCount) ? this.rowCount : this.absolute; 
this.pageCount = parseInt(this.rowCount%this.absolute == 0 
? this.rowCount/this.absolute : this.rowCount/this.absolute+1);
}catch(exception){}

this.__updateTableRows__();
};
/**//*
下一页
*/
Page.prototype.nextPage = function(){
if(this.pageIndex + 1 < this.pageCount){
this.pageIndex += 1;
alert("1===>"+this.pageIndex);
this.__updateTableRows__();
}
};
/**//*
上一页
*/
Page.prototype.prePage = function(){
if(this.pageIndex >= 1){
this.pageIndex -= 1;
alert("2===>"+this.pageIndex);
this.__updateTableRows__();
}
};
/**//*
首页
*/
Page.prototype.firstPage = function(){
if(this.pageIndex != 0){
this.pageIndex = 0;
alert("3====>"+this.pageIndex);
this.__updateTableRows__();
} 
};
/**//*
尾页
*/
Page.prototype.lastPage = function(){
if(this.pageIndex+1 != this.pageCount){
this.pageIndex = this.pageCount - 1;
alert("4====>"+this.pageIndex);
this.__updateTableRows__();
}
};
/**//*
页定位方法
*/
Page.prototype.aimPage = function(iPageIndex){
if(iPageIndex > this.pageCount-1){
this.pageIndex = this.pageCount - 1;
}else if(iPageIndex < 0){
this.pageIndex = 0;
}else{
this.pageIndex = iPageIndex;
}
this.__updateTableRows__();
};
/**//*
执行分页时，更新显示表格内容
*/
Page.prototype.__updateTableRows__ = function(){
var iCurrentRowCount = this.absolute * this.pageIndex;
var iMoreRow = this.absolute+iCurrentRowCount > this.rowCount ? this.absolute+iCurrentRowCount - this.rowCount : 0;
var tempRows = this.__cloneRows__();
//alert(tempRows === this.dataRows);
//alert(this.dataRows.length);
var removedTBody = this.__oTable__.removeChild(this.__oTBody__);
var newTBody = document.createElement("TBODY");
newTBody.setAttribute("id", this.tBodyId);

for(var i=iCurrentRowCount; i < this.absolute+iCurrentRowCount-iMoreRow; i++){
newTBody.appendChild(tempRows[i]);
}
this.__oTable__.appendChild(newTBody);
/**//*
this.dataRows为this.oTBody的一个引用，
移除this.oTBody那么this.dataRows引用将销失,
code:this.dataRows = tempRows;恢复原始操作行集合.
*/
this.__dataRows__ = tempRows;
this.__oTBody__ = newTBody;
//alert(this.dataRows.length);
//alert(this.absolute+iCurrentRowCount);
//alert("tempRows:"+tempRows.length);

};
/**//*
克隆原始操作行集合
*/
Page.prototype.__cloneRows__ = function(){
var tempRows = [];
for(var i=0; i<this.__dataRows__.length; i++){
/**//*
code:this.dataRows[i].cloneNode(param), 
param = 1 or true:复制以指定节点发展出去的所有节点,
param = 0 or false:只有指定的节点和它的属性被复制.
*/
tempRows[i] = this.__dataRows__[i].cloneNode(1);
}
return tempRows;
};
var page=null;
window.onload = function(){
  page = new Page(5,'table1','group_one');
};
function onClickNext(){
    if(page)
      page.nextPage();
}
function onClickPre(){
    if(page)
      page.prePage();
}
</script>
</head>

<body>

<table id="table1" border="0" width="486">
<thead>
<tr style="background-color:#CCCCCC;">
<th style="cursor:pointer;">Last Name</th>
<th style="cursor:pointer;">First Name</th>
<th style="cursor:pointer;">Birthday</th>
<th style="cursor:pointer;">Siblings</th>
</tr>
</thead>
<tbody id="group_one">
<tr style="background-color:#f3f3f3">
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Johnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Gilliam</td>
<td>Micheal</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Johnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr style="background-color:#B4D6FC">
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr style="background-color:#f3f3f3">
<td>Gilliam</td>
<td>Micheal</td>
<td>7/22/1949</td>
<td>5</td>
</tr>
</tbody>
</table>
<span id="s"></span>
<table><tr><td><a href="#" onclick="onClickNext();">下一页</a></td><td><a href="#" onclick="onClickPre();">上一页</a></td><td><span id="pageindex"></span></td></tr></table>
</body>
</html>
 
分享到：
| 邮件附件名超长问题的解决
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯js分页模板

    纯JavaScript分页模板是一种在网页应用中实现数据分页功能的方法，它不依赖任何外部库如jQuery或AngularJS，完全由原生JavaScript代码构建。这种模板通常包括一系列用于计算页码、显示当前页数、处理页码跳转事件...

    Fy:Fy.js一个纯JavaScript分页插件

    一个纯JavaScript分页插件 任何人都可以免费使用、修改、发布 author:oospace email: 使用方法 1,代码前几行进参数配置 var Num=Number() //总条数(必填) var index = Number(); //当前页(必填) var pageNum=Number...

    javaScript分页

    在本项目中，我们将探讨如何使用纯JavaScript实现分页功能，以及涉及的相关知识点。 首先，我们需要理解分页的基本原理。分页的核心思想是将大数据集分成多个较小的部分，每个部分称为一页。用户每次只加载和查看...

    纯JAVASCRIPT实现分页

    得用JavaScript面向对象编程，编写了一个分页通过控件。代码精简，功能强大.

    js分页插件

    下面以一个基本的纯JavaScript分页插件为例，阐述其工作流程： 1. **初始化**：接收数据总数、每页显示数量等参数，计算出总页数。 2. **渲染界面**：创建分页元素，包括页码按钮和页码输入框。 3. **事件绑定**：...

    经典的10种JS分页代码

    3. **纯JavaScript分页**：不依赖任何外部库，通过JavaScript实现分页逻辑。例如，可以使用数组或对象存储数据，根据当前页数动态渲染页面内容。 4. **AJAX分页**：使用AJAX异步加载数据，用户在切换页面时无需刷新...

    纯前端分页

    总之，纯前端分页是Web开发中不可或缺的一部分，通过JavaScript、DOM操作和CSS，我们可以创建出高效、易用的分页解决方案。在给定的文件中，我们可以看到一个具体的实现案例，这对于学习和理解这一技术是非常有价值...

    纯手工编写JavaScript分页处理方法.js

    工作分享：纯手工编写JavaScript分页处理方法，亲测可用，可以直接拿来用，上代码

    一个非常精巧的javascript实现的Bootstrap分页插件

    这个JavaScript实现的Bootstrap分页插件则直接在纯JavaScript环境下工作，无需额外引入jQuery等类库。这降低了项目对第三方库的依赖，提高了页面加载速度，并简化了代码结构。开发者只需在页面中正确引用该插件的JS...

    原生JS不依赖其它库分页代码.zip_html_html 模板_jquery_js分页

    这个名为"原生JS不依赖其它库分页代码.zip"的压缩包提供了一个不依赖任何外部JavaScript库（如jQuery）的纯JavaScript分页解决方案。下面我们将详细探讨这个分页代码实现的关键知识点。 首先，我们来看`...

    自制纯js分页框架

    4. **JavaScript分页逻辑**：`spagination.js` 是核心脚本，包含了分页功能的实现。主要包括计算总页数、生成页码按钮、监听按钮点击事件、更新当前页等功能。开发者需要了解如何根据数据量和每页显示的数量来计算总...

    纯jsp分页查询

    【纯jsp分页查询】是一种在Web开发中常见的技术，主要应用于数据量较大时，为了提高用户体验和页面加载速度，将大量数据分为多个部分（页）进行显示。在这个项目中，开发者使用了JSP（JavaServer Pages）技术，这是...

    javascript分页

    在这个例子中，我们将探讨如何使用纯JavaScript来实现一个简单的分页功能。 首先，理解分页的基本原理是关键。分页通常涉及到两个主要部分：前端的展示逻辑和后端的数据接口。前端负责展示分页控件，如页码、跳转...

    用javascript原生写的纯前端控制分页

    用javascript原生写的纯前端控制分页，一定是各位前端人的所爱，代码简洁，附有demo，一看就懂，你也可以自己在此基础上进行扩展～

    【纯JS表格分页代码】

    本资源提供了一个基于纯JavaScript实现的表格分页代码，它适用于静态数据的展示，主要功能是通过分页来控制表格中数据行的显示与隐藏，从而提高用户浏览效率和页面性能。 首先，我们来看“tabel纯分页效果.html”这...

    2个分页控件（其中一个是用JAVASCRIPT写的）

    在这个案例中，我们有两个分页控件，一个使用非JavaScript技术，可能是依赖服务器端语言如PHP、ASP.NET或Java实现，而另一个则是纯JavaScript编写的。 JavaScript是一种广泛使用的客户端脚本语言，它在浏览器环境中...

    纯js实现表格分页

    使用纯JavaScript实现表格分页显示，提供页面跳转功能，包括首页、上一页、下一页、尾页等功能。

    jquery分页 纯前端分页 修改部分bug，利于调用

    本话题将深入探讨如何利用jQuery实现纯前端分页，并修复其中的一些常见问题。 首先，前端分页的优点在于减少了服务器的负载，因为所有数据处理都在客户端完成，用户可以在不请求额外服务器资源的情况下浏览不同页面...

    两个纯JS实现分页的例子源码 （真经典）

    本篇将详细介绍两个纯JavaScript实现分页的经典例子，帮助你理解和掌握这一核心技术。 首先，我们要明白分页的基本原理：将大量数据分为若干个部分，每次只加载一部分到页面上，用户可以通过导航按钮切换不同的数据...

    javascript实现的分页程序，一共十种

    1. **纯JavaScript实现**：不依赖任何库或框架，仅使用原生JavaScript编写，适用于对体积和性能有高要求的场景。 2. **jQuery插件**：基于jQuery库的分页插件，利用jQuery的便利性简化DOM操作。 3. **AJAX请求**：...

Magicbox
Global site tag (gtag.js) - Google Analytics