bootstrap table.js动态填充单元格数据的多种方法

时间：2021-05-28

bootstrap-table.js动态填充table单元格数据，总结了几种方法以适应各种需求，以下就简单介绍两种方法：

方法一：全部自动填充table

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <!-- 引入 echarts.js --> <script type="text/javascript" src="js/echarts.min.js"></script> <!-- 引入jquery.js --> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/bootstrap-table.js"></script> <script type="text/javascript" src="js/bootstrap-table-zh-CN.min.js"></script></head><body><div class="mdsd-content"> <div class="panel panel-info" style="background: none;"> <div class="panel-body" style="width: 100%;"> <table id="table-javascript" class="table table-hover table-responsive "></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="js/echarts.min.js"></script> <!-- 引入jquery.js --> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/bootstrap-table.js"></script> <script type="text/javascript" src="js/bootstrap-table-zh-CN.min.js"></script></head><body><div class="panel panel-info" style="background: none;"> <div class="panel-body" style="width: 100%;"> <table id="table-javascript" class="table table-hover table-responsive "> <thead> <th style="text-align: center; vertical-align: middle;"><div class="th-inner ">Address</div></th> <th style="text-align: center; vertical-align: middle;"><div class="th-inner ">States</div></th> <th style="text-align: center; vertical-align: middle;"><div class="th-inner ">Cores</div></th> <th style="text-align: center; vertical-align: middle;"><div class="th-inner ">CoresUsed</div></th> <th style="text-align: center; vertical-align: middle;"><div class="th-inner ">Memory</div></th> <th style="text-align: center; vertical-align: middle;"><div class="th-inner ">MemoryUsed</div></th> </thead> <tbody id="dataTable"></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 align='center'>" + data.workers[i].address + "</td>" + "<td align='center'>" + data.workers[i].state + "</td>" + "<td align='center'>" + data.cores + "</td>" + "<td align='center'>" + data.coresUsed + "</td>" + "<td align='center'>" + data.memory + "</td>" + "<td align='center'>" + data.memoryUsed + "</td></tr>"; } //将动态生成的table添加的事先隐藏的div中. $("#dataTable").html(tableStr); }</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章