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" 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) { //調(diào)用創(chuàng)建表和填充動態(tài)填充數(shù)據(jù)的方法. createShowingTable(data) }, error : function() { } }); }); //動態(tài)的創(chuàng)建一個table,同時將后臺獲取的數(shù)據(jù)動態(tài)的填充到相應(yīng)的單元格 function createShowingTable(data) { //獲取后臺傳過來的jsonData,并進(jìn)行解析 //此處需要讓其動態(tài)的生成一個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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS+DIV+CSS實現(xiàn)的經(jīng)典標(biāo)簽切換效果代碼
這篇文章主要介紹了JS+DIV+CSS實現(xiàn)的經(jīng)典標(biāo)簽切換效果代碼,涉及JavaScript基于鼠標(biāo)事件針對頁面元素動態(tài)變換的實現(xiàn)技巧,頁面美觀實用,需要的朋友可以參考下2015-09-09基于js中style.width與offsetWidth的區(qū)別(詳解)
下面小編就為就大家?guī)硪黄趈s中style.width與offsetWidth的區(qū)別(詳解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11JavaScript拖拽、碰撞、重力及彈性運(yùn)動實例分析
這篇文章主要介紹了JavaScript拖拽、碰撞、重力及彈性運(yùn)動實現(xiàn)方法,涉及JavaScript數(shù)學(xué)運(yùn)算結(jié)合時間函數(shù)實現(xiàn)運(yùn)動效果的相關(guān)技巧,需要的朋友可以參考下2016-01-01JS簡單實現(xiàn)多級Select聯(lián)動菜單效果代碼
這篇文章主要介紹了JS簡單實現(xiàn)多級Select聯(lián)動菜單效果代碼,涉及JavaScript數(shù)組元素的遍歷及動態(tài)設(shè)置select的實現(xiàn)技巧,需要的朋友可以參考下2015-09-09使用window.prompt()實現(xiàn)彈出用戶輸入的對話框
window對象的最后一種對話框是提示對話框,它顯示了預(yù)先設(shè)置的信息并提供文本域供用戶輸入應(yīng)答。它包括兩個按鈕,即Cancel和Ok,允許用戶用兩個相反的期望值來關(guān)閉這個對話框:取消整個操作或接收輸入到對話框中的文本2015-04-04使用plupload自定義參數(shù)實現(xiàn)多文件上傳
這篇文章主要介紹了使用plupload自定義參數(shù)實現(xiàn)多文件上傳的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07js中如何將多層嵌套的數(shù)組轉(zhuǎn)換為一層數(shù)組
這篇文章主要介紹了js中如何將多層嵌套的數(shù)組轉(zhuǎn)換為一層數(shù)組問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06jJavaScript中toFixed()和正則表達(dá)式的坑
這篇文章主要介紹了jJavaScript中toFixed()和正則表達(dá)式的坑,toFixed方法可以把Number四舍五入為指定小數(shù)位數(shù)的數(shù)字,具體詳細(xì)內(nèi)容需要的小伙伴可以參考一下2022-04-04uni-app操作數(shù)據(jù)庫的三種方法總結(jié)
數(shù)據(jù)庫操作的,可以采用多方案,下面這篇文章主要給大家介紹了關(guān)于uni-app操作數(shù)據(jù)庫的三種方法,文中通過實例代碼和圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05