超简洁js表格

---

完整demo下载

---

显示效果

使用示例

---

html

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

css

.AJRD_datatable_box{overflow-x: auto; overflow-y: auto; height: 300px; width:300px;}
.AJRD_datatable {width: 100%;border-style: none;background-color: #fff;margin-bottom: 20px;text-align: center;}
.AJRD_datatable th, .datatable td { padding: 5px;line-height: 30px}
.AJRD_datatable thead th {background-color: #eee;margin: 0;text-align: center;border-top: 1px solid #cfcfcf;border-bottom: 1px solid #cfcfcf;font-weight: 500}
.AJRD_datatable tbody td {background-color: #fff;border-bottom: 1px solid #ddd;table-layout:fixed;word-break:break-all;font-weight: 400}
.AJRD_datatable tbody tr.evenrow td {background-color: #f4f4f4;}
.AJRD_datatable tfoot td {background-color: #fafafa;text-align: right;border-bottom: 1px solid #cfcfcf;}
    /*表格分页列表*/
.AJRD_datatable td.paging a {border: 1px solid #eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align:center;}
    /*表格分页当前页*/
.AJRD_datatable td.paging a.current {background: #eee; border: 1px solid #CFCFCF; color: #444; font-weight: bold;}
.AJRD_datatable td.paging a.current{border: 0;cursor: auto;background:none}

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    //必须   默认 10
});
cs.init(0,9);

对象方法

---

init(begin,end)

初始化表格

refresh()

刷新表格

setOption(option)

重设参数

setWidth(width)

设置宽度

setHeight(height)

设置高度

源码

---

/**
 * 表格对象
 * @param options
 */
function AJRD_table(tableId,options){
    this._tableId=tableId;
    this._options=options;
    /**
     * 抽象化表格
     */
    function abstractTable(){
        // ---------内容属性
        this.id = null;         // 每个表格都有唯一的一个id
        this.tableobj = null;  //表格对象
        this.rowNum = 0;       //行数
        this.colNum = 0;      //列数
        this.header = [];     //表头数据
        this.content = [];   //body数据
        // ----------提供外部使用获得表格内部数据
        this.currentClickRowID = 0;   //当前点击的行数据
        // --- 通过表头来获得这张表的列数
        this.getColNum = function(){
            this.colNum = this.header.length;
            return   this.colNum;
        }
        // -----------  表格自我构建行为
        this.clearTable = function(){};
        this.showHeader = function(){};
        this.showContent = function(begin,end){};
        this.showFoot = function(){};

        // --------- 分页功能属性
        this.allDataNum = 0;  // 总数据条数
        this.displayNum = 10; // 每页显示条数
        this.maxPageNum = 0;  // 最大页码值
        this.currentPageNum =1;// 当前页码值
        //tfoot分页组
        this.groupDataNum = 10;  //每组显示10页
        this.groupNum = 1;       //当前组

        // -------- 分页功能行为
        this.paginationFromBeginToEnd = function(begin,end){}
        this.first =  function(){}//首页
        this.last = function(){}//最后一页
        this.prev = function(){}//上一页
        this.next = function(){}//下一页
        this.goto = function(){} //跳到某页

        // ----------- 表格初始化
        this.init = function(begin,end){}
    }

    /*
     表格对象模板
     */
    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);
    //得到表格对象
    this.tableobj = $("#"+this._tableId);
    //清空表格内容
    this.clearTable = function(){
        this.tableobj.html(" ");
    }
    // 实现分页行为
    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;
            // 循环创建行
            for(var i=0;i<len;i++){
                $tr = $("<tr>").appendTo($tbody);
                if(i%2==1){
                    $tr.addClass("evenrow");
                }
                // 循环创建列  取得对象中的键
                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);
    }
    //表格分页
    this.pagination = function(tdCell){
        var $td= typeof(tdCell) == "object" ? tdCell : $("#" + tdCell);
        //首页
        var oA = $("<a/>");
        oA.attr("href","#1");
        oA.html("首页");
        $td.append(oA);
        //上一页
        if(this.currentPageNum>=2){
            var oA = $("<a/>");
            oA.attr("href","#"+(this.currentPageNum - 1));
            oA.html("上一页");
            $td.append(oA);
        }
        //普通显示格式
        if(this.maxPageNum <= this.groupDataNum){  // 10页以内 为一组
            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{//超过10页以后（也就是第一组后）
             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);
                 }
             }
        }
        //下一页
        if( (this.maxPageNum - this.currentPageNum) >= 1 ){
            var oA = $("<a/>");
            oA.attr("href","#" + (this.currentPageNum + 1));
            oA.html("下一页");
            $td.append(oA);
        }
        //尾页
        var oA = $("<a/>");
        oA.attr("href","#" + this.maxPageNum);
        oA.html("尾页");
        $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){//直接点击尾页
                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);
    }
}