# Bootstrap  Table

## 參考文件

{% embed url="<https://bootstrap-table.com/docs/extensions/editable/>" %}

## **使用CDN**

### CSS

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

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

{% hint style="info" %}

### 🕵️‍♀️注意

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

### CDN介紹

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

{% content-ref url="../qian-duan-san-xiong-di/js-ji-ben-shi-yong" %}
[js-ji-ben-shi-yong](https://information9527.gitbook.io/html/qian-duan-san-xiong-di/js-ji-ben-shi-yong)
{% endcontent-ref %}

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

### Bootstrap 使用Json

{% file src="<https://3336654295-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDPdvZ3NzJOlXMhEq_2%2F-McMRKhlCwKXxuhaaXRo%2F-McMRmE5aEg-Nc1xIjpM%2Fdata1.json?alt=media&token=8d974660-24ab-4815-984a-593f72bce286>" %}
data.json
{% endfile %}

## 簡易範例

### 使用JS寫入

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

{% tabs %}
{% tab title="HTML" %}

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

{% endtab %}

{% tab title="CSS" %}

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

```

{% endtab %}

{% tab title="JS" %}

```javascript
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})
})
```

{% endtab %}
{% endtabs %}

### JSON檔案

{% file src="<https://3336654295-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDPdvZ3NzJOlXMhEq_2%2F-McMNBuiec6ylCC8S6lA%2F-McMO0e4fnVKSmP9NaWU%2Fdata1.json?alt=media&token=dfd2a754-14e9-4539-a279-fcffcd5c255c>" %}
data.json
{% endfile %}

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

{% tabs %}
{% tab title="html" %}

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

{% endtab %}
{% endtabs %}

### AJAX

{% tabs %}
{% tab title="HTML" %}

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

{% endtab %}

{% tab title="JS" %}

```javascript
  // 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)
    })
  }
```

{% endtab %}
{% endtabs %}