动态加载bootstrap表格数据

---

表格效果如下

表格效果

完整demo下载

html

js

//普通bootstrap表格
function Table_bs($box){

    var _init_bit = false;
    var _box = $box;

    this.init = function(){

        _box.addClass('table-responsive');

        var html = '';
        html += '';
        html += '';
        // html += '';
        // html += '';
        html += '';
        html += '';
        // html += '';
        // html += '';
        html += '';
        html += '';

        _box.append($(html));

        _init_bit = true;
    }
    this.load = function(option){

        if(!_init_bit){
            this.init();
        }

        // 表头
        var thead = option.colNames;

        var html_thead = '';
        html_thead += '';
        for(var i=0;i';
        }
        html_thead += '';

        _box.find('thead').append($(html_thead));

        // 表身
        var tbody = option.data;
        var html_tbody = '';

        for(var j1=0;j1';
            }
            html_tbody += '';
        }
        _box.find('tbody').append($(html_tbody));
    }
}

var option = {
    colNames: ['选择', '课程ID', '课程名称', '类型', '排序值', '状态', '是否免费', '操作', '课件试听'],
    data:[
        ['','168','强化数学1下','纯视频（16:9）','50','在线2016-07-05','收费','
','学员听课/管理员听课'],
        ['','169','强化数学1下','纯视频（16:9）','50','在线2016-07-05','收费','
','学员听课/管理员听课'],
    ]
}

$(function(){
    var t = new Table_bs($('#kechengguanli'));
    t.load(option);
});