溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“bootstrap table.js動態(tài)填充單元格數(shù)據(jù)的方法有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“bootstrap table.js動態(tài)填充單元格數(shù)據(jù)的方法有哪些”這篇文章吧。
bootstrap-table.js動態(tài)填充table單元格數(shù)據(jù)，總結(jié)了幾種方法以適應(yīng)各種需求，以下就簡單介紹兩種方法：
方法一：全部自動填充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" >
<div class="panel-body" >
<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" >
<div class="panel-body" >
<table id="table-javascript"
class="table table-hover table-responsive ">
<thead>
<th ><div
class="th-inner ">Address</div></th>
<th ><div
class="th-inner ">States</div></th>
<th ><div
class="th-inner ">Cores</div></th>
<th ><div
class="th-inner ">CoresUsed</div></th>
<th ><div
class="th-inner ">Memory</div></th>
<th ><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) {
//調(diào)用創(chuàng)建表和填充動態(tài)填充數(shù)據(jù)的方法.
createShowingTable(data)
},
error : function() {
}
});
});
//動態(tài)的創(chuàng)建一個(gè)table，同時(shí)將后臺獲取的數(shù)據(jù)動態(tài)的填充到相應(yīng)的單元格
function createShowingTable(data) {
//獲取后臺傳過來的jsonData,并進(jìn)行解析
//此處需要讓其動態(tài)的生成一個(gè)table并填充數(shù)據(jù)
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>";
}
//將動態(tài)生成的table添加的事先隱藏的div中.
$("#dataTable").html(tableStr);
}
</script>
</body>
</html>以上是“bootstrap table.js動態(tài)填充單元格數(shù)據(jù)的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼