Bootstrap Table

參考文件

Table Editable · Bootstrap Table

使用CDN

CSS

<link rel="stylesheet" 
    href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">

<link rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" 
    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" 
    crossorigin="anonymous">

JS

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"></script>
    
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>

🕵️‍♀️注意

jQuery.min.js 必須要放在最上面，才能使用。Bootstrap-table 架構中，使用JQuery.js ，所以要確認先後順序。

CDN介紹

下方連結有詳細CDN使用方式/介紹

JS 基本使用

使用範例建議先準備data.json 較為好操作。

Bootstrap 使用Json

72KB

data1.json

data.json

簡易範例

使用JS寫入

HTML請各為讀者自行條習慣的版面，來方便查看TABLE資料、畫面呈現。

HTML

<div class="container table_body">
    <table id="table" class="table">
        <thead>
          <tr>
            <th data-field="id">ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
          </tr>
        </thead>
      </table>
</div>

CSS

*,*::after,*::before{
    margin-top: 0;
    padding: 0;
    box-sizing: border-box ;
}
body{
    height: 100vh;
}
.table_body{
    margin-top: 10px;
}

JS

var $table = $('#table')
   
$(function() {
  var data = [
    {
      'id': 0,
      'name': 'Item 0',
      'price': '$0'
    },
    {
      'id': 1,
      'name': 'Item 1',
      'price': '$1'
    },
    {
      'id': 2,
      'name': 'Item 2',
      'price': '$2'
    },
    {
      'id': 3,
      'name': 'Item 3',
      'price': '$3'
    },
    {
      'id': 4,
      'name': 'Item 4',
      'price': '$4'
    },
    {
      'id': 5,
      'name': 'Item 5',
      'price': '$5'
    }
  ]
  $table.bootstrapTable({data: data})
})

JSON檔案

72KB

data1.json

data.json

若在data1.json只需要在 table 內中，加入data-url=""(內容路徑)即可，因為容量會較多，需要自行給他調整高度，如何限制高度就加入data-height="" 就完成。

html

<div class="container table_body">
<div class="container table_body">
  <table
    id="table"
    data-url="json/data1.json"
    data-height="400"
    >
    <thead>
      <tr>
        <th data-field="id">ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
      </tr>
    </thead>
  </table>
</div>
</div>

AJAX

HTML

<div class="container table_body">
  <table
    id="table"
    data-toggle="table"
    data-ajax="ajaxRequest"
    data-height="400"
    >
    <thead>
      <tr>
        <th data-field="id">ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
      </tr>
    </thead>
  </table>
</div>

JS

  // your custom ajax request here
  function ajaxRequest(params) {
    var url = `https://examples.wenzhixin.net.cn
    /examples/bootstrap_table/data`
    $.get(url + '?' + $.param(params.data)).then(function (res) {
      params.success(res)
    })
  }