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 相关文章推荐
JS 统计时间
Mar 09 Javascript
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
Javascript基础教程之for循环
Jan 18 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
js实现倒计时关键代码
May 05 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 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
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
python获取外网ip地址的方法总结
2015/07/02 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python基于百度云文字识别API
2018/12/13 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python读取图片任意范围区域
2019/01/23 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
测绘工程个人的自我评价
2013/11/10 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
大学生个人学习总结
2015/02/15 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
Python中time与datetime模块使用方法详解
2022/03/31 Python