bootstrap table.js动态填充单元格数据的多种方法
2019-07-18 17:16
1351 查看
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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- bootstrap-table.js多种方法填充单元格数据
- bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色
- 前台JS获取后台的Json数据, 动态创建table并填充数据
- 给用户窗体控件ListBox列表框填充单元格数据的多种方法
- web前台工作笔记(时间戳、js中clone的使用、js中动态填充数据注意事项、前台查错方法的学习)
- bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色
- JS实现table表格数据排序(可支持动态数据+分页效果)
- 初探原生js根据json数据动态创建table
- js如何获取table中动态生成的数据
- 《项目经验》--后台一般处理程序向前台JS文件传递JSON,JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中
- JS组件Bootstrap Table使用方法详解
- js导出table数据到excel即导出为EXCEL文档的方法
- 初探原生js根据json数据动态创建table
- js实现对table动态添加、删除和更新的方法
- JS实现table表格数据排序功能(可支持动态数据+分页效果)
- 4.2、JS——var 数据类型 节点标签属性操作 动态获取方法
- bootstrap-table方法之:expandRow-collapseRow,展开或关闭当前行数据
- Bootstrap table表格初始化表格数据的方法
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JS生成动态表格并为每个单元格添加单击事件的方法