bootstrap-table.js动态填充table单元格数据，总结了几种方法以适应各种需求，以下就简单介绍两种方法：
方法一：全部自动填充table
class="table table-hover table-responsive ">
$('#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');
});
方法二：表头这一栏固定，自动填充主体部分
class="table table-hover table-responsive ">
class="th-inner ">Address
class="th-inner ">States
class="th-inner ">Cores
class="th-inner ">CoresUsed
class="th-inner ">Memory
class="th-inner ">MemoryUsed
$(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 + "
" + data.workers[i].address
+ "
" + "" + data.workers[i].state + ""
+ "
" + data.cores + ""
+ "
" + data.coresUsed + ""
+ "
" + data.memory + ""
+ "
" + data.memoryUsed + "";
}
//将动态生成的table添加的事先隐藏的div中.
$("#dataTable").html(tableStr);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
