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;
};
分享到:
相关推荐
jQuery实现Table分页效果 本文实例为大家分享了jQuery实现Table分页效果的具体代码,供大家参考,具体内容如下 CSS: <style> .pager { font-size: 18px; } .pagerTotal { font-size: 18px; height: 36px;...
js_table分页,利用js分页 比较简单一些吧!!不用再用sql查询出来分页,但是缺点是影响性能!
Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行、...
vue实现表格分页功能 本文实例为大家分享了vue实现表格分页功能的具体代码,供大家参考,具体内容如下 直接上代码: 这里是这里是template部分,主要由一个需要分页的表格和一个分页器组成。重点在于表格的data...
JS实现前端分页效果 本文实例为大家分享了JS实现前端分页效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset='utf-8'> <script src="js/jquery.js"></script> ...
主要为大家详细介绍了基于JavaScript实现表格滚动分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript我v页效果(收集了很多强大的JS分页代码),可以直接使用,不会JS的也能在自己网站上应用到强大的JS分页特效
Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能,而且该插件同时也提供了一些不错的扩展功能,如移动行、...
在jsp文件中,使用简单的javascript技术,实现假分页
//分页显示所有的数据 if(books!=null){ int count = new BooksImpl().SelectCount();//查出总共有多少条数据 int pageCount= pagebean.getTotalPages(count, pagebean.getPageSize());//计算出总共有...
//加这一句后页面初始化后就会分页了 /* var obj_table = document.getElementById("table"); if(obj_table!=null) { sorter.init("table"); sorter.size(20); } */ sorter.selectedPagePre = getElement(...
本文实例讲述了JavaScript分页功能的实现方法。分享给大家供大家参考。具体实现方法如下: [removed] //定义page为全局变量,以便下面使用 var page; [removed] = function() { var table = document....
html前端获取后端js的数据,实现到html表格,并且实现表格分页显示,分页显示原理是要显示那一页数据就从后端获取需要显示页的数据,不会一次性获取全部数据,减小流前端的压力。后端使用js+express,读取csv文件...
使用react-table v7的带有搜索示例的React表分页(服务器端) 在React Hooks应用程序中使用Search来构建React Table Pagination(服务器端)应用程序,使用react-table v7用于数据表,使用Material-UI用于分页。...
具有过滤,排序,分页等功能的可扩展表。 按住shift键可对多个字段进行排序。 安装 npm install react-filterable-table 基本用法: const FilterableTable = require ( 'react-filterable-table' ) ; // Data for...
html网页 table表格增加序号显示javascript
bootstrap和jQuery做带分页跳转的表格实例
<script type="text/javascript"> var xmlhttp; function loadXMLDoc(url,cfun) { // alert("hadhfaf"); xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=cfun; xmlhttp.open("GET",url,true); ...
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 页面内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
代码如下: <%... charset=UTF-8″ pageEncoding=”UTF-8″%> <!... <HEAD>...javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Content-Type content=”text/html