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>

 

 

你可能感兴趣的:(table)