bootstrap中table如何綁定數(shù)據(jù)

小編給大家分享一下bootstrap中table如何綁定數(shù)據(jù)，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

支持三種方式bootstrap table綁定數(shù)據(jù)：1.html格式數(shù)據(jù)（即靜態(tài)數(shù)據(jù)）；2.JavaScript傳遞數(shù)據(jù)；3.數(shù)據(jù)屬性變量動(dòng)態(tài)獲取。

靜態(tài)表格：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>
<!--定義一個(gè)表格，無需設(shè)置表頭，統(tǒng)一在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>

數(shù)據(jù)屬性變量動(dòng)態(tài)獲取

<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>

看完了這篇文章，相信你對(duì)bootstrap中table如何綁定數(shù)據(jù)有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！