下方連結有詳細CDN使用方式/介紹
JS 基本使用使用範例建議先準備data.json 較為好操作。
HTML請各為讀者自行條習慣的版面，來方便查看TABLE資料、畫面呈現。
若在data1.json只需要在 table 內中，加入data-url=""(內容路徑)即可，因為容量會較多，需要自行給他調整高度，如何限制高度就加入data-height="" 就完成。
Last updated
Was this helpful?
Was this helpful?
<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"><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><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>*,*::after,*::before{
margin-top: 0;
padding: 0;
box-sizing: border-box ;
}
body{
height: 100vh;
}
.table_body{
margin-top: 10px;
}
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})
})<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><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> // 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)
})
}