完整demo下載

顯示效果

表格樣式

使用示例

html

<div id = "cs_table_box" class = "AJRD_datatable_box" >
     <table id= "cs_table" class= "AJRD_datatable" ></table >
</div>

js

var _data=[
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'},
    {a:'adrian',b:'simon',c:'jack',d:'yxkk'}
]

var cs = new AJRD_table('cs_table',{
    "headers":["1","2","3","4"],   //必須
    "data":_data,        //必須
    "displayNum": 20    //必須   默認(rèn) 10
});
cs.init(0,9);

對(duì)象方法

init(begin,end)

• begin 顯示起始位置
• end 顯示截止位置
  初始化表格

refresh()

刷新表格

setOption(option)

重設(shè)參數(shù)

setWidth(width)

設(shè)置寬度

setHeight(height)

設(shè)置高度

源碼

/**
 * 表格對(duì)象
 * @param options
 */
function AJRD_table(tableId,options){
    this._tableId=tableId;
    this._options=options;
    /**
     * 抽象化表格
     */
    function abstractTable(){
        // ---------內(nèi)容屬性
        this.id = null;         // 每個(gè)表格都有唯一的一個(gè)id
        this.tableobj = null;  //表格對(duì)象
        this.rowNum = 0;       //行數(shù)
        this.colNum = 0;      //列數(shù)
        this.header = [];     //表頭數(shù)據(jù)
        this.content = [];   //body數(shù)據(jù)
        // ----------提供外部使用獲得表格內(nèi)部數(shù)據(jù)
        this.currentClickRowID = 0;   //當(dāng)前點(diǎn)擊的行數(shù)據(jù)
        // --- 通過(guò)表頭來(lái)獲得這張表的列數(shù)
        this.getColNum = function(){
            this.colNum = this.header.length;
            return   this.colNum;
        }
        // -----------  表格自我構(gòu)建行為
        this.clearTable = function(){};
        this.showHeader = function(){};
        this.showContent = function(begin,end){};
        this.showFoot = function(){};
    
        // --------- 分頁(yè)功能屬性
        this.allDataNum = 0;  // 總數(shù)據(jù)條數(shù)
        this.displayNum = 10; // 每頁(yè)顯示條數(shù)
        this.maxPageNum = 0;  // 最大頁(yè)碼值
        this.currentPageNum =1;// 當(dāng)前頁(yè)碼值
        //tfoot分頁(yè)組
        this.groupDataNum = 10;  //每組顯示10頁(yè)
        this.groupNum = 1;       //當(dāng)前組
    
        // -------- 分頁(yè)功能行為
        this.paginationFromBeginToEnd = function(begin,end){}
        this.first =  function(){}//首頁(yè)
        this.last = function(){}//最后一頁(yè)
        this.prev = function(){}//上一頁(yè)
        this.next = function(){}//下一頁(yè)
        this.goto = function(){} //跳到某頁(yè)
    
        // ----------- 表格初始化
        this.init = function(begin,end){}
    }

    /*
     表格對(duì)象模板
     */
    function tableTemplet(table_id){
        abstractTable.call(this);
        this.id = table_id;
    }
    
    var _self=this;
    
    if(!options){return;}
    if(!$.isPlainObject(options)){return;}

    tableTemplet.call(this,_self._tableId);
    console.log(this._tableId);
    //得到表格對(duì)象
    this.tableobj = $("#"+this._tableId);
    //清空表格內(nèi)容
    this.clearTable = function(){
        this.tableobj.html(" ");
    }
    // 實(shí)現(xiàn)分頁(yè)行為
    this.paginationFromBeginToEnd= function(x,y){
        this.maxPageNum = Math.ceil(this.allDataNum/this.displayNum);
        var arrPage = [];
        for(var i= x;i<y;i++){
            arrPage.push(this.content[i]);
        }
        return arrPage;
    }

    this.showHeader = function(){
        if(this.header != null){
           var  $thead = $("<thead>"),
                $tr = $("<tr>"),
                $th;
            for(var i=0;i<this.colNum;i++){
                $th = $("<th>").html(this.header[i]);
                $th.appendTo($tr);
            }
            $tr.appendTo($thead);
            $thead.appendTo(this.tableobj)
        }
    }
    //初始化tbody
    this.showContent = function(begin,end){
        if(this.content != null){
            var $tbody = $("<tbody>"),
                $tr,
                $td;
            var tempDaTa = this.paginationFromBeginToEnd(begin,end),
                len = tempDaTa.length;
            // 循環(huán)創(chuàng)建行
            for(var i=0;i<len;i++){
                $tr = $("<tr>").appendTo($tbody);
                if(i%2==1){
                    $tr.addClass("evenrow");
                }
                // 循環(huán)創(chuàng)建列  取得對(duì)象中的鍵
                for(var key in tempDaTa[i]){
                    $td = $("<td>").html(tempDaTa[i][key]).appendTo($tr);
                }
            }
            this.tableobj.append($tbody);
        }
    }
    //初始化tfoot
    this.showFoot = function(){
       var $tfoot = $("<tfoot>"),
           $tr = $("<tr>"),
           $td = $("<td>").attr("colspan",this.colNum).addClass("paging");
           $tr.append($td);
           $tfoot.append($tr);
           this.tableobj.append($tfoot);
           this.pagination($td);
    }
    //表格分頁(yè)
    this.pagination = function(tdCell){
        var $td= typeof(tdCell) == "object" ? tdCell : $("#" + tdCell);
        //首頁(yè)
        var oA = $("<a/>");
        oA.attr("href","#1");
        oA.html("首頁(yè)");
        $td.append(oA);
        //上一頁(yè)
        if(this.currentPageNum>=2){
            var oA = $("<a/>");
            oA.attr("href","#"+(this.currentPageNum - 1));
            oA.html("上一頁(yè)");
            $td.append(oA);
        }
        //普通顯示格式
        if(this.maxPageNum <= this.groupDataNum){  // 10頁(yè)以內(nèi) 為一組
            for(var i = 1;i <= this.maxPageNum ;i++){
                var oA = $("<a/>");
                oA.attr("href","#"+i);
                if(this.currentPageNum == i){
                    oA.attr("class","current");
                }
                oA.html(i);
                $td.append(oA);
            }
        }else{//超過(guò)10頁(yè)以后（也就是第一組后）
             if(this.groupNum<=1){//第一組顯示
                 for(var j = 1;j <= this.groupDataNum ;j++){
                     var oA = $("<a/>");
                     oA.attr("href","#"+j);
                     if(this.currentPageNum == j){
                         oA.attr("class","current");
                     }
                     oA.html(j);
                     $td.append(oA);

                 }
             }else{//第二組后面的顯示
                 var begin = (this.groupDataNum*(this.groupNum-1))+ 1,
                      end ,
                     maxGroupNum = Math.ceil(this.maxPageNum/this.groupDataNum);
                 if(this.maxPageNum%this.groupDataNum!=0&&this.groupNum==maxGroupNum){
                     end = this.groupDataNum*(this.groupNum-1)+this.maxPageNum%this.groupDataNum
                 }else{
                     end = this.groupDataNum*(this.groupNum);
                 }

                 for(var j = begin;j <= end ;j++){
                     var oA = $("<a/>");
                     oA.attr("href","#"+j);
                     if(this.currentPageNum == j){
                         oA.attr("class","current");
                     }
                     oA.html(j);
                     $td.append(oA);
                 }
             }
        }
        //下一頁(yè)
        if( (this.maxPageNum - this.currentPageNum) >= 1 ){
            var oA = $("<a/>");
            oA.attr("href","#" + (this.currentPageNum + 1));
            oA.html("下一頁(yè)");
            $td.append(oA);
        }
        //尾頁(yè)
        var oA = $("<a/>");
        oA.attr("href","#" + this.maxPageNum);
        oA.html("尾頁(yè)");
        $td.append(oA);

        var page_a = $td.find('a');
        var tempThis = this;

        page_a.unbind("click").bind("click",function(){
            var nowNum =  parseInt($(this).attr('href').substring(1));

            if(nowNum>tempThis.currentPageNum){//下一組
                if(tempThis.currentPageNum%tempThis.groupDataNum==0){
                    tempThis.groupNum += 1;

                    var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
                    if(tempThis.groupNum>=maxGroupNum){
                        tempThis.groupNum = maxGroupNum;
                    }
                }
            }
            if(nowNum<tempThis.currentPageNum){//上一組
                if((tempThis.currentPageNum-1)%tempThis.groupDataNum==0){
                    tempThis.groupNum -= 1;
                    if(tempThis.groupNum<=1){
                        tempThis.groupNum = 1;
                    }
                }
            }
            if(nowNum==tempThis.maxPageNum){//直接點(diǎn)擊尾頁(yè)
                var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
                tempThis.groupNum = maxGroupNum;
            }
            if(nowNum==1){
                var maxGroupNum = Math.ceil(tempThis.maxPageNum/tempThis.groupDataNum);
                tempThis.groupNum = 1;
            }
            tempThis.currentPageNum = nowNum;


            tempThis.init((tempThis.currentPageNum-1)*tempThis.displayNum,
                tempThis.currentPageNum*tempThis.displayNum);
            return false;
        });
    }
    //初始化
    this.init = function(begin,end){
        this.header = this._options.headers;
        this.colNum = this.header.length;
        this.content = this._options.data;
        this.allDataNum = this.content.length;
        if(this._options.displayNum){
            this.displayNum = this._options.displayNum;
        }
        if(this._options.groupDataNum){
            this.groupDataNum = this._options.groupDataNum;
        }
        this.clearTable();
        this.showHeader();
        this.showContent(begin,end);
        this.showFoot();
    }
    this.refresh=function(){
        this.init(0,this._options.displayNum);
    }
    this.setOption=function(option){
        this._options=option;
    }
    this.setWidth=function(w){
        $('#'+this._tableId+'_box').width(w);
    }
    this.setHeight=function(h){
        $('#'+this._tableId+'_box').height(h);
    }
}