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

2024-08-01 16:03:40

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 填充Json数据的实例代码

本文介绍Bootstrap 填充Json数据,具体如下: 一.如图: 二.html代码: <%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <div class="content"> <div class="table-responsive"> &l
BootStrap中的table实现数据填充与分页应用小结

BootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化.最近后台使用此插件做了一个表格应用,做个总结. 1.使用方法可以通过又拍云提供的CDN获取js插件,样式表和国际化插件,或者直接去官网下载.将下面的js插件和样式放到html head 头里即可使用. //样式 <link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.
bootstrap table.js动态填充单元格数据的多种方法

bootstrap-table.js动态填充table单元格数据,总结了几种方法以适应各种需求,以下就简单介绍两种方法: 方法一:全部自动填充table <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title>  <script typ
vue element-ui table组件动态生成表头和数据并修改单元格格式父子组件通信

父组件定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件table components: { tableC: TableComponents }, 获取表头和表内容数据.(真实数据应该是从接口获取的,由于是测试数据这里我先写死)
ASP.NET GridView 实现课程表显示(动态合并单元格)实现步骤

GridView,ASP.NET中很常用的数据显示控件,这里,我将用这个控件来实现课程表的显示.首先说说课程表的显示与普通记录的显示有何不同?这里所说的普通记录是指直接从数据库中查询出来的.没有经过任何处理的记录.通常,我们用GridView显示这些普通记录,只需直接将这些记录表绑定到GridView中即可.但是,课程表的显示可不是这么简单,它需要将普通记录继续加工,需要根据记录中具体的数据来确定数据需要显示在哪一行.哪一列,而且需要根据课程开始时间和结束时间动态合并单元格,最后才是数据的显示.
JSP中动态合并单元格的实例代码

废话不多说了,具体代码如下所示: <span style="font-size:14px;"> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <table width="100%" border="0" cellspacing="0" cellpadding="0&q
Bootstrap实现的表格合并单元格示例

本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
JS实现控制表格内指定单元格内容对齐的方法

本文实例讲述了JS实现控制表格内指定单元格内容对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制表格单元格的内容向右对齐 <!DOCTYPE html> <html> <head> <script> function alignCell() { document.getElementById('td1').align="right"; } </script> </head> <body> &l
javascript动态添加单元格的脚本代码

如何动态添加单元格!! 复制代码代码如下: 用insertRow()和insertCell()方法其用法如下: insertRow() 复制代码代码如下: var newTR=TableOBJ.insertRow(N); 复制代码代码如下: 其中N表示插入到第几行! 说明:当N=0时,插入到最上面一行!当N=-1时插入到最后一行,相当省略该参数! insertCell() 复制代码代码如下: var newTD=TrOBJ.insertCell(N); 其中N表示插入到第几列!
jquery 动态合并单元格的实现方法

如下所示: ////在table的第二行的位置添加一行: var tbl_elm = $("#dgList"); $('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .Tab
JS获取表格内指定单元格html内容的方法

本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组,然后定位指定的单元格,通过单元格的innerHTML属性获得单元格的html内容 <!DOCTYPE html> <html> <head> <script> function cell() { var x=document.getElementById('myTable').rows[0].cells;
JS实现控制表格单元格垂直对齐的方法

本文实例讲述了JS实现控制表格单元格垂直对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制指定的单元格靠底部垂直对齐 <!DOCTYPE html> <html> <head> <script> function valignCell() { var x=document.getElementById('myTable').rows[0].cells; x[0].vAlign="bottom"; } </script>

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

相关推荐

随机推荐