bootstrap-table.js多种方法填充单元格数据
2017-05-05 22:55
597 查看
动态填充table单元格数据,总结了几种方法以适应各种需求,以下就简单介绍两种方法:
方法一:全部自动填充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>
相关文章推荐
- bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色
- bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色
- 给用户窗体控件ListBox列表框填充单元格数据的多种方法
- Boostrap-table.js的表格数据可视化 集成bootstrap-editable.js
- JS选中checkbox后获取table内一行TD所有数据的方法
- BootStrapTable.JS 单元格不换行的实现
- BootStrap table 数据填充与分页应用总结
- js将网页中的table中的数据导入到excel中方法
- js导出table数据到excel即导出为EXCEL文档的方法
- Swing 中Table的创建和向Table中填充数据的方法
- bootstrap table ajax获取后台数据后js做判断
- Node.js中Bootstrap-table的两种分页的实现方法
- 前台JS获取后台的Json数据, 动态创建table并填充数据
- BootStrap中的table实现数据填充与分页应用小结
- JS与jQuery遍历Table所有单元格内容的方法
- js操作table表格导出数据到excel方法
- JS选中checkbox后获取table内一行TD所有数据的方法
- 多种方式实现JS调用后台方法进行数据交互
- JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
- BootStrap table 数据填充与分页