So binden Sie Daten in der Bootstrap-Tabelle

(*-*)浩
Freigeben: 2019-07-11 09:27:11
Original
3853 Leute haben es durchsucht

支持三种方式bootstrap table绑定数据:1.html格式数据(即静态数据);2.JavaScript传递数据;3.数据属性变量动态获取。

So binden Sie Daten in der Bootstrap-Tabelle

静态表格:data-toggle="table"(推荐学习:Bootstrap视频教程

<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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

数据属性变量动态获取

<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>
Nach dem Login kopieren

更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!

Das obige ist der detaillierte Inhalt vonSo binden Sie Daten in der Bootstrap-Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!