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


Posted in Javascript onJuly 18, 2019

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 #Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 #Javascript
Vue动态生成表格的行和列
Jul 18 #Javascript
vue通过数据过滤实现表格合并
Nov 30 #Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 #Javascript
小程序分页实践之编写可复用分页组件
Jul 18 #Javascript
在vue项目中使用sass语法问题
Jul 18 #Javascript
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
jquery层次选择器的介绍
2019/01/18 jQuery
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
python redis存入字典序列化存储教程
2020/07/16 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
师德建设实施方案
2014/03/21 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书