js完美实现table分页

// 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,sPageId) {
    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.pageId = sPageId;//显示当前页数的span的ID

    this.__init__(); //初始化;

};
/*
初始化
*/
Page.prototype.__init__ = function () {
    this.__oTable__ = document.getElementById(this.tableId); //获取table引用
    this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId]; //获取tBody引用
    this.__pageInnerDiv__ = document.getElementById(this.pageId);
    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);
    document.getElementById(this.pageId).innerHTML = "当前页:" + (this.pageIndex + 1);
};
/*
克隆原始操作行集合
*/
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;
};

显示使用例子

<!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>
    <title></title>
</head>
<body>
    <table id="divtable">
                <tbody id="group_one">
                    <tr>
                        <td>
                            54898498
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            4684646
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            4987/7874
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            4654985498
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            74987498/
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            498496496
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                      <tr>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                        <td>
                            123213
                        </td>
                    </tr>
                </tbody>
            </table>
            <span id="s"></span>
            <a href="#" onclick="page.firstPage();">首页</a>

            <a href="#" onclick="page.prePage();">上一页</a>

            <a href="#" onclick="page.nextPage();">下一页</a>

            <a href="#" onclick="page.lastPage();">尾页</a>

            <span id="pageindex"></span>
   <script type="text/javascript">
         $(document).ready(function() {
               page = new Page(3, ‘divtable‘, ‘group_one‘, "pageindex");
         });

   </script>
   <script src="JS/JSPager.js" type="text/javascript"></script>
</body>
</html>
 

js完美实现table分页

时间: 2024-10-15 12:25:14

js完美实现table分页的相关文章

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

有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript"> var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage; //最后页 var direct=0; //方向 var len; //总行数 var page; //总页数 var begin; var end; $(docume

Table 分页处理

介绍两种table分页处理:PHP分页 和 js(jquery.table)分页. 一:jquery.table: 1:下载两个文件:table_jui.css 和 jquery.dataTables.min.js(当然前面的加载 jquery.js文件):将其拉入html 前面. table_jui.css  和   jquery.dataTables.min.js 2:建表: 1 <table style="width: 100%; margin-bottom:8px; "

html 布局;css3+jq 下拉菜单;table分页动态添加行;html5本地存储;简单易用的html框架

简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下拉菜单美化 1 input{appearance:none;background-color:transparent;border: solid 0px #000;} /*input 无边框*/ 2 input:disabled{background-color:#d2d2d2;border:0px

js的几种分页

1. function lastStart(pageIndex,size){ for(i=pageIndex-1;i>=0;i--){ if(i%size==0){ return i+1; } } } function firstEnd(pageIndex,totalPage,size){ for(i=pageIndex;i<totalPage;i++){ if(i%size==0){ return i; } } return totalPage; } function drawPage(to

JS完美识别IE, firefox, chrome, safari浏览器

(转)判断是否为IE浏览器很简单,用navigator.appName来判断就行了.而Firefox, Chrome, Safari的navigator.appName输出值都是"Netscape",现在我们用navigator.userAgent这个属性来判断,因为谷歌浏览器Chrome的navigator.userAgent值包含"Safari"字符串而Safari浏览器并不包含Chrome,因此我们可以用这个区别来区分safari和chrome. 完整代码如下

scroll pagination.js数据重复加载、分页问题

scroll pagination.js数据重复加载.分页问题 解决办法 参考资料: http://blog.csdn.net/dyw442500150/article/details/17532425 http://bbs.csdn.net/topics/390624732?locationNum=8 解决数据重复加载,加锁机制,修改源JS文件为: /* ** Anderson Ferminiano ** [email protected] -- feel free to contact me

[转] js实现html table 行,列锁定

js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml&

原生JS实现排序和分页的代码

原文:原生JS实现排序和分页的代码 代码下载地址:http://www.zuidaima.com/share/1550463246568448.htm 这个也是在网上下的,开始觉得不错,不过毕竟是插件. 标签: js 分页 排序 插件 话题: Web开发 前端技术 原生JS实现排序和分页的代码

纯手写完美实现前端分页效果

经常听人提到前端分页技术,却总也没有完全的实现过,作为做过多年前后端的老码工,真的有必要好好研究一番,以飨读者; 在这里不只是有前端分页页面效果,更有真实数据的展示,实现了真正的分页哦! 内容导读 1.页面设计 2.jQuery之ajax与JSON数据 3.运行效果 说明: (1)需要将源码导入HBuilder中,打开HBuilder直接通过内置服务器运行页面即可实现分页效果 (2)一个分页小技术有时也是让人挠头,这里完全前端实现方式与Java的实现方式,我们提供给你完全的编码参考,希望能够帮到