bootstrap中怎么利用table綁定數據

今天就跟大家聊聊有關bootstrap中怎么利用table綁定數據，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

支持三種方式bootstrap table綁定數據：1.html格式數據（即靜態數據）；2.JavaScript傳遞數據；3.數據屬性變量動態獲取。

靜態表格：data-toggle="table"

<table data-toggle="table">  <thead>    <tr>      <th>Item ID</th>      <th>Item Name</th>      <th>Item Price</th>    </tr>  </thead>  <tbody>    <tr>      <td>1</td>      <td>Item 1</td>      <td>$1</td>    </tr>    <tr>      <td>2</td>      <td>Item 2</td>      <td>$2</td>    </tr>  </tbody></table>

JavaScript方式

<table id="table"></table><!--定義一個表格，無需設置表頭，統一在JS中初始化，靈活度較高(梁新建議)--><script>$('#table').bootstrapTable({  url: 'data1.json',  pagination: true,  search: true  columns: [{    field: 'id',    title: 'Item ID'  }, {    field: 'name',    title: 'Item Name'  }, {    field: 'price',    title: 'Item Price'  }, ]})</script>

數據屬性變量動態獲取

<table  data-toggle="table"  data-url="data1.json"  data-pagination="true"  data-search="true">  <thead>    <tr>      <th data-sortable="true" data-field="id">Item ID</th>      <th data-field="name">Item Name</th>      <th data-field="price">Item Price</th>    </tr>  </thead></table>

看完上述內容，你們對bootstrap中怎么利用table綁定數據有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。