bootstrap table.js動態(tài)填充單元格數(shù)據(jù)的多種方法

第bootstraptable.js動態(tài)填充單元格數(shù)據(jù)的多種方法bootstrap-table.js動態(tài)填充table單元格數(shù)據(jù)，總結(jié)了幾種方法以適應(yīng)各種需求，以下就簡單介紹兩種方法：

方法一：全部自動填充table

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title/title

!--引入echarts.js--

scripttype="text/javascript"src="js/echarts.min.js"/script

!--引入jquery.js--

scripttype="text/javascript"src="js/jquery-2.1.1.min.js"/script

scripttype="text/javascript"

src="js/bootstrap-table.js"/script

scripttype="text/javascript"

src="js/bootstrap-table-zh-CN.min.js"/script

/head

body

div

div

div

tableid="table-javascript"

/table

/div

/div

/div

scripttype="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

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title/title

!--引入echarts.js--

scripttype="text/javascript"src="js/echarts.min.js"/script

!--引入jquery.js--

scripttype="text/javascript"src="js/jquery-2.1.1.min.js"/script

scripttype="text/javascript"

src="js/bootstrap-table.js"/script

scripttype="text/javascript"

src="js/bootstrap-table-zh-CN.min.js"/script

/head

body

div

div

tableid="table-javascript"

thead

thdiv

Address/div/th

thdiv

States/div/th

thdiv

Cores/div/th

thdiv

CoresUsed/div/th

thdiv

Memory/div/th

thdiv

MemoryUsed/div/th

/thead

tbodyid="dataTable"/tbody

/table

/div

/div

scripttype="text/JavaScript"

$(function(){

$.ajax({

url:ContextUtil.zutnlp_spark_info,

type:"GET",

success:function(data){

//調(diào)用創(chuàng)建表和填充動態(tài)填充數(shù)據(jù)的方法.

createShowingTable(data)

error:function(){

//動態(tài)的創(chuàng)建一個table，同時將后臺獲取的數(shù)據(jù)動態(tài)的填充到相應(yīng)的單元格

functioncreateShowingTable(data){

//獲取后臺傳過來的jsonData,并進行解析

//此處需要讓其動態(tài)的生成一個table并填充數(shù)據(jù)

vartableStr="";

varlen=data.workers.length;

for(vari=0;ilen;i++){

tableStr=tableStr+"trtdalign='center'"+data.workers[i].address

+"/td"+"tdalign='center'"+data.workers[i].state+"/td"

+"tdalign='center'"+data.cores+"/td"

+"tdalign='center'"+data.coresUsed+"/td"

+"tdalign='center'"+data.memory+"/td"

+"tdalign='center'"+data.memoryUsed+