脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap table.js填充单元格数据

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

 更新时间：2019年07月18日 17:16:24   作者：wisdom_bo  
这篇文章主要为大家详细介绍了bootstrap table.js填充单元格数据的多种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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>

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

您可能感兴趣的文章:

相关文章

  • JS+DIV+CSS实现的经典标签切换效果代码

    JS+DIV+CSS实现的经典标签切换效果代码

    这篇文章主要介绍了JS+DIV+CSS实现的经典标签切换效果代码,涉及JavaScript基于鼠标事件针对页面元素动态变换的实现技巧,页面美观实用,需要的朋友可以参考下
    2015-09-09
  • webpack热更新的原理及实现

    webpack热更新的原理及实现

    本文主要介绍了webpack热更新的原理及实现,,无需完全刷新整个页面的同时,更新代码变动的模块,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-06-06
  • 基于js中style.width与offsetWidth的区别(详解)

    基于js中style.width与offsetWidth的区别(详解)

    下面小编就为就大家带来一篇基于js中style.width与offsetWidth的区别(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • JavaScript拖拽、碰撞、重力及弹性运动实例分析

    JavaScript拖拽、碰撞、重力及弹性运动实例分析

    这篇文章主要介绍了JavaScript拖拽、碰撞、重力及弹性运动实现方法,涉及JavaScript数学运算结合时间函数实现运动效果的相关技巧,需要的朋友可以参考下
    2016-01-01
  • JS简单实现多级Select联动菜单效果代码

    JS简单实现多级Select联动菜单效果代码

    这篇文章主要介绍了JS简单实现多级Select联动菜单效果代码,涉及JavaScript数组元素的遍历及动态设置select的实现技巧,需要的朋友可以参考下
    2015-09-09
  • 使用window.prompt()实现弹出用户输入的对话框

    使用window.prompt()实现弹出用户输入的对话框

    window对象的最后一种对话框是提示对话框，它显示了预先设置的信息并提供文本域供用户输入应答。它包括两个按钮，即Cancel和Ok，允许用户用两个相反的期望值来关闭这个对话框：取消整个操作或接收输入到对话框中的文本
    2015-04-04
  • 使用plupload自定义参数实现多文件上传

    使用plupload自定义参数实现多文件上传

    这篇文章主要介绍了使用plupload自定义参数实现多文件上传的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07
  • js中如何将多层嵌套的数组转换为一层数组

    js中如何将多层嵌套的数组转换为一层数组

    这篇文章主要介绍了js中如何将多层嵌套的数组转换为一层数组问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • jJavaScript中toFixed()和正则表达式的坑

    jJavaScript中toFixed()和正则表达式的坑

    这篇文章主要介绍了jJavaScript中toFixed()和正则表达式的坑，toFixed方法可以把Number四舍五入为指定小数位数的数字，具体详细内容需要的小伙伴可以参考一下
    2022-04-04
  • uni-app操作数据库的三种方法总结

    uni-app操作数据库的三种方法总结

    数据库操作的,可以采用多方案,下面这篇文章主要给大家介绍了关于uni-app操作数据库的三种方法,文中通过实例代码和图文介绍的非常详细,需要的朋友可以参考下
    2023-05-05

最新评论