bootstrap-table.js动态填充table单元格数据，总结了几种方法以适应各种需求，以下就简单介绍两种方法：
方法一：全部自动填充table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 引入 echarts.js --> <script type="text/javascript" src="https://www.jb51.net/js/echarts.min.js"></script> <!-- 引入jquery.js --> <script type="text/javascript" src="https://www.jb51.net/js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap-table.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap-table-zh-CN.min.js"></script> </head> <body> <div> <div> <div> <table></table> </div> </div> </div> <script type="text/javascript"> $('#table-javascript').bootstrapTable({ method : 'get', url : ContextUtil.zutnlp_spark_info, cache : false, pagination : true, root : 'workers', total : 'totalElements', sidePagination : 'server', columns : [ { field : 'address', title : 'Address', align : 'center', valign : 'middle' }, { field : 'state', title : 'State', align : 'center', valign : 'middle', } ] }); $(window).resize(function() { $('#table-javascript').bootstrapTable('resetView'); }); </script> </body> </html>
方法二：表头这一栏固定，自动填充主体部分<tbody>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 引入 echarts.js --> <script type="text/javascript" src="https://www.jb51.net/js/echarts.min.js"></script> <!-- 引入jquery.js --> <script type="text/javascript" src="https://www.jb51.net/js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap-table.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap-table-zh-CN.min.js"></script> </head> <body> <div> <div> <table> <thead> <th><div>Address</div></th> <th><div>States</div></th> <th><div>Cores</div></th> <th><div>CoresUsed</div></th> <th><div>Memory</div></th> <th><div>MemoryUsed</div></th> </thead> <tbody></tbody> </table> </div> </div> <script type="text/JavaScript"> $(function() { $.ajax({ url : ContextUtil.zutnlp_spark_info, type : "GET", success : function(data) { //调用创建表和填充动态填充数据的方法. createShowingTable(data) }, error : function() { } }); }); //动态的创建一个table，同时将后台获取的数据动态的填充到相应的单元格 function createShowingTable(data) { //获取后台传过来的jsonData,并进行解析 //此处需要让其动态的生成一个table并填充数据 var tableStr = ""; var len = data.workers.length; for (var i = 0; i < len; i++) { tableStr = tableStr + "<tr><td>" + data.workers[i].address + "</td>" + "<td>" + data.workers[i].state + "</td>" + "<td>" + data.cores + "</td>" + "<td>" + data.coresUsed + "</td>" + "<td>" + data.memory + "</td>" + "<td>" + data.memoryUsed + "</td></tr>"; } //将动态生成的table添加的事先隐藏的div中. $("#dataTable").html(tableStr); } </script> </body> </html>