`
heikediguo
  • 浏览: 27442 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

javascript 实现table分页

 
阅读更多
function Page(iAbsolute,sTableId,sTBodyId,pageBar){
this.absolute = iAbsolute; //每页最大记录数
this.tableId = sTableId;
this.tBodyId = sTBodyId;
this.pageBar = pageBar;

//this.tFootId = sTFootId;
this.rowCount = 0;//记录数
this.pageCount = 0;//页数
this.pageIndex = 0;//页索引
this.__oTable__ = null;//表格引用
this.__oTBody__ = null;//要分页内容
this.__oTFoot__ = 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.__oTFoot__= document.getElementById(this.tFootId)
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.getBar = function(obj){
var bar = document.getElementById(obj.id);
bar.innerHTML = "每页" + this.absolute + "条/共" + this.rowCount + "条";// 第2页/共6页 首页 上一页 1 2 3 4 5 6 下一页 末页
}
/**
* 下一页
*/
Page.prototype.nextPage = function() {
if(this.pageIndex + 1 < this.pageCount) {
this.pageIndex += 1;
this.__updateTableRows__();
}
//FY();
};
/**
* 上一页
*/
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__();
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);

//页脚显示分页
var pageBar = document.getElementById(this.pageBar);//分页工具栏
pageBar.innerHTML = "";

var leftBar = document.createElement("div"),cur;
leftBar.className = 'leftBar';
cur = this.pageIndex * this.absolute + ' 到 ' + (this.pageIndex + 1) * this.pageCount;
if(this.pageIndex === 0){
cur = ' 1 到 ' + this.absolute;
}
if(this.pageIndex === this.pageCount - 1){
cur = this.pageIndex * this.absolute + ' 到 ' + this.rowCount;
}
leftBar.innerHTML = "当前显示 " + cur + " 条,共 " + this.rowCount + " 条记录";
var rightBar = document.createElement('div');
rightBar.className = 'rightBar';
var btnPre = document.createElement("a");
var btnNext = document.createElement("a");

btnPre.className = 'button-left';
btnPre.title = '上一页';
btnPre.href = "javascript:page.prePage()";
btnPre.innerHTML = '<span class="prev"></span>';

rightBar.appendChild(btnPre);
btnNext.className = 'button-right';
btnNext.title = '下一页';
btnNext.href = "javascript:page.nextPage()";
btnNext.innerHTML = '<span class="next"></span>';
rightBar.appendChild(btnNext);

pageBar.appendChild(leftBar);
pageBar.appendChild(rightBar);

if(this.pageIndex == 0){
btnPre.disabled = "disabled";
btnPre.style.cursor = 'default';
}
if(this.pageCount - 1 == this.pageIndex){
btnNext.disabled = "disabled";
btnNext.style.cursor = 'default';
}
////页脚显示分页结束

/**
this.dataRows为this.oTBody的一个引用,
移除this.oTBody那么this.dataRows引用将销失,
code:this.dataRows = tempRows;恢复原始操作行集合.
*/
this.__dataRows__ = tempRows;
this.__oTBody__ = newTBody;
};
/**
* 克隆原始操作行集合
*/
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实现table分页可以动态生成table

    在JavaScript中实现表格(table)分页是一种常见的需求,特别是在数据量较大的网页应用中,为了提高用户体验和加载速度,我们通常会将数据分页展示。本文将深入探讨如何使用JavaScript来实现这一功能,并结合给定的...

    jQuery实现Table分页跳转

    jQuery是一个轻量级的JavaScript库,它提供了一系列方便、高效的方法来操作DOM,实现复杂的交互效果,包括Table的分页功能。本教程将详细讲解如何使用jQuery实现Table的分页跳转。 一、jQuery分页原理 jQuery分页...

    layui 简单实现 TABLE 分页功能

    layui 是一款轻量级的前端框架,以其...本篇文章将详细讲解如何使用 layui 实现 TABLE 的分页功能。 首先,我们需要确保已引入 layui 的 CSS 和 JS 文件。在 HTML 文件的 `&lt;head&gt;` 标签内添加如下代码: ```html ...

    利用js制作html table分页示例(js实现分页)

    描述和标签提到的“js实现分页”和“table分页”指的是用JavaScript编写代码来控制表格数据的分页显示。实现分页的步骤一般包括设置每页显示的数据条数、获取数据总条数、计算总页数、控制当前页数变量以及能够实现...

    bootstrap table 分页栏修改

    1. **理解Bootstrap Table分页机制**: Bootstrap Table的分页功能依赖于内置的`pagination`模块。默认情况下,它会生成一个包含“第一”、“上一页”、“下一页”、“最后”按钮以及页码选择器的分页栏。这个过程...

    js实现table分页

    JavaScript(简称js)作为一种客户端脚本语言,常用于实现前端的交互功能,其中包括表格(table)的分页。本文将详细讲解如何使用JavaScript实现表格分页。 首先,我们需要理解分页的基本原理。分页主要是通过计算...

    js jquery实现table假分页

    在JavaScript和jQuery的世界里,"js jquery实现table假分页"是一个常见的需求,尤其是在处理大量数据展示时。分页能够帮助优化用户体验,避免一次性加载过多数据导致页面响应变慢。假分页,又称为模拟分页,是通过...

    JS代码实现table数据分页效果

    本文将详细介绍如何使用JavaScript(JS)来实现表格(table)数据的分页效果,分为两个部分进行讲解。 ### 第一部分:简单分页 这个部分主要实现的是基础的页数翻页功能。首先,我们需要一个包含表格数据的HTML...

    boostrap-table分页实现

    在这个“bootstrap-table分页实现”的主题中,我们主要探讨如何在 Boostrap Table 中集成分页功能,以提供更高效的数据浏览体验。 首先,我们需要了解 Bootstrap Table 的基本结构和配置。Bootstrap Table 需要 ...

    Bootstrap-table分页+汇总统计

    首先,为了实现分页,我们需要在 HTML 中设置表格的基本结构,并在 JavaScript 中配置 Bootstrap-table 的分页选项。分页可以通过 `data-pagination` 属性开启,如 `&lt;table data-pagination="true"&gt;&lt;/table&gt;`。接着...

    js_table分页

    js_table分页,利用js分页 比较简单一些吧!!不用再用sql查询出来分页,但是缺点是影响性能!

    bootstrap-table客户端分页实例

    这个"bootstrap-table客户端分页实例"是展示如何在不依赖服务器端处理的情况下,利用前端数据实现表格的分页功能,这对于小型项目或者数据量不大的场景非常实用。 Bootstrap Table的核心特性包括: 1. **数据源**...

    bootstrap-table 分页Demo

    Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行、...

    js-table分页

    `js-table`可能是指一个专门处理JavaScript表格和分页的库,虽然没有提供具体的库名称,但我们可以探讨一下JavaScript中实现表格分页的一般方法和相关的Java知识点。 在前端开发中,JavaScript通常用于创建动态和...

    bootstrap table分页例子.zip

    这个"bootstrap table分页例子.zip"文件包含了一个展示如何在Bootstrap Table中实现分页功能的示例。Bootstrap Table提供了两种主要的分页方式:简单分页和智能分页。 **简单分页**: 1. **配置项**: 在初始化...

    bootstrap table服务端实现分页效果

    Bootstrap Table服务端实现分页效果 Bootstrap Table是基于Twitter Bootstrap的插件,可以用来快速构建功能强大的表格。服务端实现分页效果是Bootstrap Table的重要功能之一,本文将详细介绍如何实现Bootstrap ...

    jQuery实现的分页排序Table组件

    在网页开发中,数据展示是不可或缺的一部分,而jQuery实现的分页排序Table组件则为开发者提供了高效、灵活的方式来处理大量数据的展示问题。这个组件通常用于动态加载和组织表格数据,使得用户可以轻松浏览和操作...

    用table绑定数据,实现分页功能

    本教程将详细讲解如何利用表格(Table)绑定数据并实现分页功能。我们将重点关注以下几个核心知识点: 1. **HTML Table**: HTML中的`&lt;table&gt;`元素用于创建表格,它由`&lt;tr&gt;`(行)、`&lt;th&gt;`(表头)和`&lt;td&gt;`(数据...

    【JavaScript源代码】javascript实现前端分页功能.docx

    JavaScript 实现前端分页功能是网页开发中常见的一种需求,特别是在处理大量数据时,为了提高用户体验,需要将数据分批次加载。在这个例子中,我们看到一个简单的JavaScript分页功能的实现,它涉及到HTML、CSS和...

    javascript实现前端分页功能.docx

    JavaScript 实现前端分页功能是Web开发中常见的一种需求,特别是在处理大量数据时,为了提高用户体验,需要将数据分块加载。以下是一个简单的JavaScript前端分页功能的实现方法。 首先,我们有一个模拟的数据集合`...

Global site tag (gtag.js) - Google Analytics