`
soleares
  • 浏览: 14668 次
  • 性别: Icon_minigender_1
  • 来自: 天津
最近访客 更多访客>>
社区版块
存档分类
最新评论

JS前端分页类

阅读更多

// JavaScript Document
/**//**
* js分页类
* @param iAbsolute 每页显示记录数
* @param sTableId 分页表格属性ID值,为String
* @param sTBodyId 分页表格TBODY的属性ID值,为String,此项为要分页的主体内容
* @Version 1.0.0
* @author 辛现宝 2007-01-15 created
* var __variable__; private
* function __method__(){};private
*/
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;
this.__updateTableRows__();
}
};
/**//*
上一页
*/
Page.prototype.prePage = function(){
if(this.pageIndex >= 1){
this.pageIndex -= 1;
this.__updateTableRows__();
}
};
/**//*
首页
*/
Page.prototype.firstPage = function(){
if(this.pageIndex != 0){
this.pageIndex = 0;
this.__updateTableRows__();
} 
};
/**//*
尾页
*/
Page.prototype.lastPage = function(){
if(this.pageIndex+1 != this.pageCount){
this.pageIndex = this.pageCount - 1;
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;
}; 

分享到:
评论

相关推荐

    JS前端分页条,支持前端,后台分页

    **一、前端分页** 前端分页指的是在浏览器端完成数据的分页展示,不依赖于服务器的实时请求。这种方式适用于数据量不大或者对响应速度要求较高的场景。前端分页的核心在于计算当前页的数据范围,并根据这个范围渲染...

    新手学习可前端分页,前端分页,简单的前端分页,html分页,html前端分页

    前端分页的基本原理是利用JavaScript来处理数据的切片和页面跳转。首先,我们需要获取所有数据,并根据每页显示的数量进行分割。然后,创建一个分页导航栏,通常包括上一页、下一页和页码按钮。当用户点击页码或导航...

    前端分页css与js

    **JavaScript在前端分页中的应用** `pagination.js`文件则是分页功能的核心逻辑代码,主要涉及以下方面: 1. **计算总页数**: 根据数据总数和每页显示的数据量,动态计算出总页数。 2. **事件绑定**: 为分页按钮...

    pagination - 前端分页插件

    本文将深入探讨“pagination”这一前端分页插件,它可以帮助开发者轻松实现具有CSS样式的分页功能。 分页插件是前端开发中的一个重要组件,它的主要作用是将大量数据分割成若干个较小的部分,每次只加载一部分数据...

    bootstrap-table,前端分页框架

    前端分页将所有数据一次性加载到客户端,然后在客户端进行分页操作;后端分页则将分页信息发送到服务器,由服务器返回当前页的数据。后端分页更适合大数据量的场景,可以减少客户端的内存占用。 三、排序功能 ...

    基于bootstrap+jQuery的前端分页

    综上所述,"基于bootstrap+jQuery的前端分页"项目涵盖了前端开发中的多个关键知识点,包括UI框架的使用、JavaScript库的应用、异步数据处理、响应式设计和前后端交互。通过理解和掌握这些技术,开发者可以构建出功能...

    纯前端分页

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

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

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

    java前端分页实现

    Java 前端分页实现是Web开发中的一个重要环节,特别是在大数据量的展示场景下,为了提高用户体验,分页能够有效地组织数据并减少一次性加载的数据量。本篇将详细讲解如何在Java前端实现分页功能。 首先,我们需要...

    前端Javaweb分页实现

    前端分页主要分为两种方式:纯前端分页和前后端联动分页。 1. 纯前端分页:所有数据一次性从后端获取,然后在前端进行分页处理。这种方式对后端压力较小,但当数据量过大时,会增加页面加载时间。 2. 前后端联动...

    前端分页工具

    很不错的前端分页工具,使用方便,需要jquery的支持,一用就会。

    pagination_zh前端分页插件.rar

    **前端分页插件——pagination_zh详解** 在网页开发中,当数据量过大时,为了提高用户体验,通常会采用分页的方式展示信息。pagination_zh是一款专为前端设计的分页插件,它能够帮助开发者轻松实现网页的分页功能,...

    jquery前端分页显示特效

    在网页开发中,前端分页是一种常见的用户界面设计,它能有效地管理大量数据,提高用户体验。本项目聚焦于使用jQuery库实现前端分页显示特效,让网页内容在多个页面间轻松切换,同时保持页面加载速度。jQuery是一个轻...

    js分页示例,前台分页,客户端分页,分页机制,js分页

    在项目中,你还可以使用现成的分页库,如jQuery的`bootstrap-paginator`或纯JavaScript的`paginator.js`,来简化开发过程。 总的来说,JavaScript分页涉及前端数据处理和用户体验优化,理解其原理和实现方式对于Web...

    前端分页样式

    在网页设计中,前端分页样式是至关重要的一个部分,它能够帮助用户高效地浏览大量数据,提升用户体验。本文将详细探讨前端分页样式的实现原理、设计原则以及常见的实现方式。 一、分页样式的重要性 前端分页样式...

    【JavaScript源代码】JS实现前端分页效果.docx

    【JavaScript前端分页效果实现详解】 在Web开发中,前端分页是常见的一种功能,用于在大量数据中分块展示,提升用户体验。本篇将详细讲解如何使用JavaScript实现前端分页效果,主要涉及HTML结构、CSS样式以及...

    java初学者教程,前端jquery.datatables.js分页

    对于Java初学者来说,这是一个很好的实践项目,可以帮助他们理解如何结合使用SpringBoot、MyBatis、JSP、jQuery和DataTables.js来实现一个功能完备的前端分页搜索系统。通过学习和实践这个教程,开发者可以提升自己...

    封装好的javascript前端分页插件pagination

    随着互联网技术的不断发展,分页插件层出不穷,而本文介绍的是一种封装良好的纯JavaScript前端分页插件——pagination。它不仅不依赖任何第三方库,而且拥有良好的扩展性,为开发者提供了便利。 ### JavaScript前端...

    jQuery前端分页显示特效代码.rar

    《jQuery前端分页显示特效代码详解》 在Web开发中,数据展示往往涉及到大量的记录,如果一次性加载所有数据,不仅会消耗大量系统资源,还可能导致页面加载速度变慢,用户体验下降。因此,分页技术应运而生,它能够...

    js/html pagination好看的前端分页插件,内附使用示例

    本篇文章将详细讲解基于JavaScript和HTML的前端分页插件,以及如何使用它们来实现美观的分页效果。 首先,我们要理解分页的基本原理。在前端,分页通常涉及两个主要部分:一是UI界面,即用户看到的分页按钮和数字;...

Global site tag (gtag.js) - Google Analytics