bootstraptable.js動(dòng)態(tài)填充單元格數(shù)據(jù)的方法有哪些-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“bootstrap table.js動(dòng)態(tài)填充單元格數(shù)據(jù)的方法有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“bootstrap table.js動(dòng)態(tài)填充單元格數(shù)據(jù)的方法有哪些”這篇文章吧。

創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作，提供網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，建網(wǎng)站，按需開(kāi)發(fā)，網(wǎng)站開(kāi)發(fā)公司，公司2013年成立是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價(jià)值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計(jì)制作，前端開(kāi)發(fā)，后臺(tái)程序制作以及后期項(xiàng)目運(yùn)營(yíng)并提出專業(yè)建議和思路。

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

方法一：全部自動(dò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>

方法二：表頭這一欄固定，自動(dòng)填充主體部分<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)建表和填充動(dòng)態(tài)填充數(shù)據(jù)的方法.
            createShowingTable(data)
          },
          error : function() {
          }
        });
  });
  //動(dòng)態(tài)的創(chuàng)建一個(gè)table，同時(shí)將后臺(tái)獲取的數(shù)據(jù)動(dòng)態(tài)的填充到相應(yīng)的單元格
  function createShowingTable(data) {
    //獲取后臺(tái)傳過(guò)來(lái)的jsonData,并進(jìn)行解析
 
    //此處需要讓其動(dòng)態(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>";
    }
    //將動(dòng)態(tài)生成的table添加的事先隱藏的div中.
    $("#dataTable").html(tableStr);
  }
</script>
</body>
</html>

以上是“bootstrap table.js動(dòng)態(tài)填充單元格數(shù)據(jù)的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：bootstraptable.js動(dòng)態(tài)填充單元格數(shù)據(jù)的方法有哪些-創(chuàng)新互聯(lián)
標(biāo)題來(lái)源：http://jinyejixie.com/article20/djcgjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、企業(yè)網(wǎng)站制作、網(wǎng)站改版、軟件開(kāi)發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

bootstraptable.js動(dòng)態(tài)填充單元格數(shù)據(jù)的方法有哪些-創(chuàng)新互聯(lián)