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

来源：动视网责编：小采时间：2020-11-27 21:53:38

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

bootstrap table.js动态填充单元格数据的多种方法:bootstrap-table.js动态填充table单元格数据，总结了几种方法以适应各种需求，以下就简单介绍两种方法：方法一：全部自动填充table <!DOCTYPE html> <html lang=en> <head> <meta charset=UT

推荐度：

点击下载本文 文档为doc格式

导读bootstrap table.js动态填充单元格数据的多种方法:bootstrap-table.js动态填充table单元格数据，总结了几种方法以适应各种需求，以下就简单介绍两种方法：方法一：全部自动填充table <!DOCTYPE html> <html lang=en> <head> <meta charset=UT

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动态填充单元格数据的多种方法

推荐度：

点击下载本文 文档为doc格式

标签：种方法单元格数据 table

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐