动态加载bootstrap表格数据


表格效果如下
表格效果

完整demo下载

html


<html>
<head>

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

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

     
    <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>

    
    <script src="js/jquery.min.js">script>
    <script src="js/bootstrap.min.js">script>

    
    <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 += '" style="text-align: center; ">';
        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<thead.length;i++){ html_thead += '' + thead[i] + ''; } html_thead += ''; _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 += ''; for(var j2=0;j2<buff.length;j2++){ html_tbody += '' + buff[j2] + ''; } html_tbody += ''; } _box.find('tbody').append($(html_tbody)); } } var option = { colNames: ['选择', '课程ID', '课程名称', '类型', '排序值', '状态', '是否免费', '操作', '课件试听'], data:[ ['">','168','强化数学1下','纯视频(16:9)','50','在线2016-07-05','收费','
">
'
,'" data-event="add_child">学员听课/" data-event="
add_child">管理员听课'], ['">','169','强化数学1下','纯视频(16:9)','50','在线2016-07-05','收费','
">
'
,'" data-event="add_child">学员听课/" data-event="
add_child">管理员听课'], ] } $(function(){ var t = new Table_bs($('#kechengguanli')); t.load(option); });

你可能感兴趣的:(js小插件,bootstrap,table)