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

时间:2020-05-17 wisdom_bo 人气:0

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>

加载全部内容