html

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> - Bootstrap Table</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!--<link rel="shortcut icon" href="favicon.ico">--> 
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-table.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
   
</head>

<body>
    <!-- 响应式表格 -->
    <div id="kechengguanli" style="width: 80%; margin: 20px;"></div>

    <!-- 全局js -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!-- Bootstrap table -->
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-mobile.min.js"></script>

    <script src="js/table-bs.js"></script>
</body>
</html>

js

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

    var _init_bit = false;
    var _box = $box;

    this.init = function(){

        _box.addClass('table-responsive');

        var html = '';
        html += '<table class="table table-bordered " style="text-align: center; ">';
        html += '<thead style="font-weight: bold;">';
        // html += '<tr>';
        // html += '</tr>';
        html += '</thead>';
        html += '<tbody>';
        // html += '<tr>';
        // html += '</tr>';
        html += '</tbody>';
        html += '</table>';

        _box.append($(html));

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

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

        // 表头
        var thead = option.colNames;

        var html_thead = '';
        html_thead += '<tr>';
        for(var i=0;i<thead.length;i++){
            html_thead += '<td>' + thead[i] + '</td>';
        }
        html_thead += '</tr>';

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

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

        for(var j1=0;j1<tbody.length;j1++){
            var buff = tbody[j1];

            html_tbody += '<tr>';
            for(var j2=0;j2<buff.length;j2++){
                html_tbody += '<td>' + buff[j2] + '</td>';
            }
            html_tbody += '</tr>';
        }
        _box.find('tbody').append($(html_tbody));
    }
}

var option = {
    colNames: ['选择', '课程ID', '课程名称', '类型', '排序值', '状态', '是否免费', '操作', '课件试听'],
    data:[
        ['<input type="checkbox">','168','强化数学1下','纯视频（16:9）','50','在线2016-07-05','收费','<div class="btn-group btn-group-xs"><button type="button" class="btn btn-info" data-event="edit"><span class="glyphicon glyphicon-edit"></span></button></div>','<a href="#" data-event="add_child">学员听课</a>/<a href="#" data-event="add_child">管理员听课</a>'],
        ['<input type="checkbox">','169','强化数学1下','纯视频（16:9）','50','在线2016-07-05','收费','<div class="btn-group btn-group-xs"><button type="button" class="btn btn-info" data-event="edit"><span class="glyphicon glyphicon-edit"></span></button></div>','<a href="#" data-event="add_child">学员听课</a>/<a href="#" data-event="add_child">管理员听课</a>'],
    ]
}

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

动态加载bootstrap表格数据

动态加载bootstrap表格数据

html

js

推荐阅读更多精彩内容